Rutinini Yarat \u2014 DS V-LINE<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --black: #000000;\r\n --dark: #1C1C1C;\r\n --gray-1: #555555;\r\n --gray-2: #888888;\r\n --gray-3: #BBBBBB;\r\n --bg-light: #F5F5F5;\r\n --bg-soft: #FAFAFA;\r\n --white: #FFFFFF;\r\n --accent: #DE1010;\r\n --mavi: #6BA3C8;\r\n --mavi-soft: #E8F1F7;\r\n --yasil: #7BA888;\r\n --yasil-soft: #EAF2EC;\r\n --border: #E5E5E5;\r\n}\r\n\r\n* { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.dsvl-app {\r\n font-family: 'Instrument Sans', sans-serif;\r\n color: var(--dark);\r\n background: var(--white);\r\n min-height: 100vh;\r\n padding: 24px 20px 60px;\r\n line-height: 1.5;\r\n}\r\n\r\n.dsvl-app * { box-sizing: border-box; }\r\n\r\n.dsvl-container {\r\n max-width: 980px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* Progress *\/\r\n.dsvl-progress {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 48px;\r\n padding-top: 8px;\r\n}\r\n.dsvl-progress-bar {\r\n flex: 1;\r\n height: 2px;\r\n background: var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.dsvl-progress-fill {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--black);\r\n transform-origin: left;\r\n transform: scaleX(0);\r\n transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);\r\n}\r\n.dsvl-progress-text {\r\n font-size: 12px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n font-weight: 500;\r\n min-width: 56px;\r\n text-align: right;\r\n}\r\n\r\n\/* Step container *\/\r\n.dsvl-step {\r\n display: none;\r\n animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.dsvl-step.active { display: block; }\r\n\r\n@keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Hero \/ welcome *\/\r\n.dsvl-hero {\r\n text-align: center;\r\n padding: 40px 0 56px;\r\n}\r\n.dsvl-eyebrow {\r\n font-size: 12px;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n font-weight: 500;\r\n margin-bottom: 24px;\r\n}\r\n.dsvl-h1 {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(38px, 6vw, 64px);\r\n font-weight: 400;\r\n line-height: 1.05;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 18px;\r\n}\r\n.dsvl-h1 em {\r\n font-style: italic;\r\n color: var(--gray-1);\r\n}\r\n.dsvl-sub {\r\n font-size: 17px;\r\n color: var(--gray-1);\r\n max-width: 520px;\r\n margin: 0 auto 40px;\r\n line-height: 1.55;\r\n}\r\n\r\n\/* Welcome cards *\/\r\n.dsvl-welcome-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n max-width: 720px;\r\n margin: 0 auto;\r\n}\r\n.dsvl-welcome-card {\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n padding: 36px 24px;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n text-align: left;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.dsvl-welcome-card:hover {\r\n background: var(--black);\r\n color: var(--white);\r\n border-color: var(--black);\r\n transform: translateY(-2px);\r\n}\r\n.dsvl-welcome-icon {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 32px;\r\n font-style: italic;\r\n margin-bottom: 32px;\r\n display: block;\r\n}\r\n.dsvl-welcome-card h3 {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n}\r\n.dsvl-welcome-card p {\r\n font-size: 13px;\r\n color: var(--gray-2);\r\n line-height: 1.4;\r\n}\r\n.dsvl-welcome-card:hover p { color: var(--gray-3); }\r\n\r\n\/* Question *\/\r\n.dsvl-q-head {\r\n margin-bottom: 36px;\r\n max-width: 680px;\r\n}\r\n.dsvl-q-num {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 14px;\r\n color: var(--gray-2);\r\n margin-bottom: 12px;\r\n}\r\n.dsvl-q-title {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(28px, 4vw, 40px);\r\n font-weight: 400;\r\n line-height: 1.15;\r\n letter-spacing: -0.01em;\r\n margin-bottom: 10px;\r\n}\r\n.dsvl-q-help {\r\n font-size: 14px;\r\n color: var(--gray-1);\r\n}\r\n\r\n.dsvl-options {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n}\r\n.dsvl-options.three { grid-template-columns: repeat(3, 1fr); }\r\n.dsvl-options.four { grid-template-columns: repeat(4, 1fr); }\r\n\r\n.dsvl-option {\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n padding: 22px 22px;\r\n cursor: pointer;\r\n text-align: left;\r\n font-family: inherit;\r\n font-size: 15px;\r\n color: var(--dark);\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n min-height: 72px;\r\n}\r\n.dsvl-option:hover {\r\n border-color: var(--black);\r\n background: var(--bg-soft);\r\n}\r\n.dsvl-option.selected {\r\n background: var(--black);\r\n color: var(--white);\r\n border-color: var(--black);\r\n}\r\n.dsvl-option-label {\r\n font-weight: 500;\r\n}\r\n.dsvl-option-arrow {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n opacity: 0;\r\n transition: opacity 0.2s;\r\n}\r\n.dsvl-option:hover .dsvl-option-arrow,\r\n.dsvl-option.selected .dsvl-option-arrow { opacity: 1; }\r\n\r\n\/* Nav *\/\r\n.dsvl-nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 40px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--border);\r\n}\r\n.dsvl-btn-back {\r\n background: none;\r\n border: none;\r\n font-family: inherit;\r\n font-size: 14px;\r\n color: var(--gray-1);\r\n cursor: pointer;\r\n letter-spacing: 0.04em;\r\n padding: 8px 0;\r\n}\r\n.dsvl-btn-back:hover { color: var(--black); }\r\n.dsvl-btn-back:disabled { opacity: 0.3; cursor: not-allowed; }\r\n\r\n.dsvl-btn-primary {\r\n background: var(--black);\r\n color: var(--white);\r\n border: none;\r\n padding: 14px 28px;\r\n font-family: inherit;\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n.dsvl-btn-primary:hover { background: var(--dark); transform: translateX(2px); }\r\n.dsvl-btn-primary:disabled {\r\n background: var(--gray-3);\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n\/* Result *\/\r\n.dsvl-result-head {\r\n text-align: center;\r\n padding: 12px 0 40px;\r\n border-bottom: 1px solid var(--border);\r\n margin-bottom: 48px;\r\n}\r\n.dsvl-result-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n padding: 6px 12px;\r\n border: 1px solid currentColor;\r\n margin-bottom: 24px;\r\n}\r\n.dsvl-result-tag.mavi { color: var(--mavi); }\r\n.dsvl-result-tag.yasil { color: var(--yasil); }\r\n.dsvl-result-tag.neytral { color: var(--gray-1); }\r\n\r\n.dsvl-result-title {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 400;\r\n line-height: 1.1;\r\n letter-spacing: -0.015em;\r\n max-width: 680px;\r\n margin: 0 auto 16px;\r\n}\r\n.dsvl-result-title em { font-style: italic; color: var(--gray-1); }\r\n.dsvl-result-desc {\r\n font-size: 15px;\r\n color: var(--gray-1);\r\n max-width: 560px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* Routine sections *\/\r\n.dsvl-routine-section { margin-bottom: 64px; }\r\n.dsvl-routine-head {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 14px;\r\n margin-bottom: 28px;\r\n padding-bottom: 14px;\r\n border-bottom: 1px solid var(--border);\r\n}\r\n.dsvl-routine-icon {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 28px;\r\n color: var(--gray-2);\r\n}\r\n.dsvl-routine-h {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 26px;\r\n font-weight: 400;\r\n letter-spacing: -0.01em;\r\n}\r\n.dsvl-routine-meta {\r\n margin-left: auto;\r\n font-size: 12px;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--gray-2);\r\n font-weight: 500;\r\n}\r\n\r\n\/* Step list *\/\r\n.dsvl-steps-list {\r\n list-style: none;\r\n display: grid;\r\n gap: 14px;\r\n}\r\n.dsvl-step-item {\r\n display: grid;\r\n grid-template-columns: 56px 110px 1fr auto;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 16px 20px;\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n transition: all 0.2s;\r\n}\r\n.dsvl-step-item:hover {\r\n background: var(--white);\r\n border-color: var(--dark);\r\n}\r\n.dsvl-step-num {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 32px;\r\n color: var(--gray-3);\r\n line-height: 1;\r\n}\r\n.dsvl-step-img-wrap {\r\n width: 110px;\r\n height: 110px;\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.dsvl-step-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n mix-blend-mode: multiply;\r\n}\r\n.dsvl-step-info { min-width: 0; }\r\n.dsvl-step-cat {\r\n font-size: 11px;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--gray-2);\r\n font-weight: 500;\r\n margin-bottom: 4px;\r\n}\r\n.dsvl-step-name {\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n line-height: 1.3;\r\n}\r\n.dsvl-step-note {\r\n font-size: 13px;\r\n color: var(--gray-1);\r\n line-height: 1.4;\r\n}\r\n.dsvl-step-actions {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n align-items: flex-end;\r\n}\r\n.dsvl-step-btn {\r\n font-size: 12px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n text-decoration: none;\r\n padding: 8px 14px;\r\n white-space: nowrap;\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n border: 1px solid var(--black);\r\n font-family: inherit;\r\n}\r\n.dsvl-step-btn.primary { background: var(--black); color: var(--white); }\r\n.dsvl-step-btn.primary:hover { background: var(--dark); }\r\n.dsvl-step-btn.ghost { background: var(--white); color: var(--black); }\r\n.dsvl-step-btn.ghost:hover { background: var(--black); color: var(--white); }\r\n\r\n\/* Alternatives *\/\r\n.dsvl-alt-block {\r\n margin-top: 32px;\r\n padding: 24px;\r\n background: var(--bg-soft);\r\n border-left: 2px solid var(--gray-3);\r\n}\r\n.dsvl-alt-head {\r\n font-size: 12px;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n color: var(--gray-1);\r\n margin-bottom: 12px;\r\n}\r\n.dsvl-alt-text {\r\n font-size: 14px;\r\n line-height: 1.55;\r\n color: var(--dark);\r\n}\r\n\r\n\/* Notes \/ disclaimers *\/\r\n.dsvl-notes {\r\n background: var(--mavi-soft);\r\n padding: 24px 28px;\r\n margin: 40px 0;\r\n border-left: 3px solid var(--mavi);\r\n}\r\n.dsvl-notes.warn {\r\n background: #FFF7E6;\r\n border-left-color: #F0A500;\r\n}\r\n.dsvl-notes.cta {\r\n background: var(--bg-soft);\r\n border-left-color: var(--black);\r\n}\r\n.dsvl-notes-h {\r\n font-weight: 600;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n letter-spacing: 0.02em;\r\n}\r\n.dsvl-notes-text {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n color: var(--dark);\r\n}\r\n\r\n\/* Bundle CTA *\/\r\n.dsvl-bundle {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n align-items: center;\r\n gap: 24px;\r\n padding: 32px;\r\n background: var(--black);\r\n color: var(--white);\r\n margin-top: 56px;\r\n}\r\n.dsvl-bundle-h {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 24px;\r\n margin-bottom: 6px;\r\n}\r\n.dsvl-bundle-p {\r\n font-size: 14px;\r\n color: var(--gray-3);\r\n}\r\n.dsvl-bundle-btn {\r\n background: var(--white);\r\n color: var(--black);\r\n padding: 16px 28px;\r\n text-decoration: none;\r\n font-size: 13px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n transition: all 0.2s;\r\n white-space: nowrap;\r\n}\r\n.dsvl-bundle-btn:hover { background: var(--accent); color: var(--white); }\r\n\r\n\/* Footer actions *\/\r\n.dsvl-footer-actions {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 64px;\r\n padding-top: 32px;\r\n border-top: 1px solid var(--border);\r\n}\r\n.dsvl-footer-actions button {\r\n background: none;\r\n border: 1px solid var(--border);\r\n font-family: inherit;\r\n font-size: 13px;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n padding: 12px 20px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n.dsvl-footer-actions button:hover {\r\n border-color: var(--black);\r\n color: var(--black);\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 720px) {\r\n .dsvl-app { padding: 16px 14px 40px; }\r\n .dsvl-hero { padding: 24px 0 40px; }\r\n .dsvl-welcome-grid { grid-template-columns: 1fr; }\r\n .dsvl-options, .dsvl-options.three, .dsvl-options.four {\r\n grid-template-columns: 1fr;\r\n }\r\n .dsvl-step-item {\r\n grid-template-columns: 80px 1fr;\r\n grid-template-rows: auto auto;\r\n gap: 14px;\r\n padding: 14px;\r\n }\r\n .dsvl-step-num { display: none; }\r\n .dsvl-step-img-wrap { width: 80px; height: 80px; }\r\n .dsvl-step-actions {\r\n grid-column: 1 \/ -1;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n }\r\n .dsvl-bundle { grid-template-columns: 1fr; text-align: center; }\r\n .dsvl-routine-meta { display: none; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"dsvl-app\">\r\n <div class=\"dsvl-container\">\r\n\r\n \r\n <div class=\"dsvl-progress\" id=\"dsvlProgress\" style=\"display:none;\">\r\n <div class=\"dsvl-progress-bar\"><div class=\"dsvl-progress-fill\" id=\"dsvlProgressFill\"><\/div><\/div>\r\n <div class=\"dsvl-progress-text\" id=\"dsvlProgressText\">1 \/ 5<\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"dsvl-step active\" data-step=\"welcome\">\r\n <div class=\"dsvl-hero\">\r\n <div class=\"dsvl-eyebrow\">DS V-Line \u00b7 \u015e\u0259xsi Bax\u0131m<\/div>\r\n <h1 class=\"dsvl-h1\">Rutinini <em>yarat<\/em><\/h1>\r\n <p class=\"dsvl-sub\">5 sual cavabland\u0131r, d\u0259rin\u0259 uy\u011fun s\u0259h\u0259r v\u0259 gec\u0259 rutinini al. H\u0259r add\u0131m s\u0259nin d\u0259ri tipin v\u0259 problemin \u00fc\u00e7\u00fcn haz\u0131rlan\u0131r.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-welcome-grid\">\r\n <button class=\"dsvl-welcome-card\" data-time=\"morning\">\r\n <span class=\"dsvl-welcome-icon\">i.<\/span>\r\n <h3>S\u0259h\u0259r rutini<\/h3>\r\n <p>G\u00fcn\u0259 t\u0259miz ba\u015fla<\/p>\r\n <\/button>\r\n <button class=\"dsvl-welcome-card\" data-time=\"evening\">\r\n <span class=\"dsvl-welcome-icon\">ii.<\/span>\r\n <h3>Gec\u0259 rutini<\/h3>\r\n <p>Yuxudan \u0259vv\u0259l b\u0259rpa<\/p>\r\n <\/button>\r\n <button class=\"dsvl-welcome-card\" data-time=\"both\">\r\n <span class=\"dsvl-welcome-icon\">iii.<\/span>\r\n <h3>H\u0259r ikisi<\/h3>\r\n <p>Tam g\u00fcnl\u00fck bax\u0131m<\/p>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q1\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 01<\/div>\r\n <h2 class=\"dsvl-q-title\">D\u0259ri tipiniz n\u0259dir?<\/h2>\r\n <p class=\"dsvl-q-help\">\u018fmin deyils\u0259ns\u0259, \u00fcz\u00fcn\u00fc yumadan 1 saat sonra T-zonana bax.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options\" data-q=\"q1\">\r\n <button class=\"dsvl-option\" data-val=\"quru\"><span class=\"dsvl-option-label\">Quru \/ H\u0259ssas<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"normal\"><span class=\"dsvl-option-label\">Normal<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"yagli\"><span class=\"dsvl-option-label\">Ya\u011fl\u0131 \/ S\u0131zanaql\u0131<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"qarisiq\"><span class=\"dsvl-option-label\">Qar\u0131\u015f\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q2\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 02<\/div>\r\n <h2 class=\"dsvl-q-title\">\u018fsas problemin n\u0259dir?<\/h2>\r\n <p class=\"dsvl-q-help\">S\u0259ni \u0259n \u00e7ox narahat ed\u0259n bir problemi se\u00e7.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options three\" data-q=\"q2\">\r\n <button class=\"dsvl-option\" data-val=\"qirisiq\"><span class=\"dsvl-option-label\">Q\u0131r\u0131\u015f\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"quruluq\"><span class=\"dsvl-option-label\">Quruluq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"sizanaq\"><span class=\"dsvl-option-label\">S\u0131zanaq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"mesame\"><span class=\"dsvl-option-label\">Geni\u015f m\u0259sam\u0259l\u0259r<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"leke\"><span class=\"dsvl-option-label\">L\u0259k\u0259l\u0259r<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"hessas\"><span class=\"dsvl-option-label\">H\u0259ssasl\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"problemyox\"><span class=\"dsvl-option-label\">Problem yoxdur<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"bedenqaralma\"><span class=\"dsvl-option-label\">B\u0259d\u0259n qaralmas\u0131<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"catlaq\"><span class=\"dsvl-option-label\">Sell\u00fclit \/ \u00c7atlaq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q3\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 03<\/div>\r\n <h2 class=\"dsvl-q-title\">Ya\u015f qrupun?<\/h2>\r\n <\/div>\r\n <div class=\"dsvl-options four\" data-q=\"q3\">\r\n <button class=\"dsvl-option\" data-val=\"18-25\"><span class=\"dsvl-option-label\">18 \u2014 25<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"26-35\"><span class=\"dsvl-option-label\">26 \u2014 35<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"36-45\"><span class=\"dsvl-option-label\">36 \u2014 45<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"46+\"><span class=\"dsvl-option-label\">46+<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q4\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 04<\/div>\r\n <h2 class=\"dsvl-q-title\">G\u00fcn\u0259\u015f\u0259 n\u0259 q\u0259d\u0259r m\u0259ruz qal\u0131rsan?<\/h2>\r\n <p class=\"dsvl-q-help\">A\u00e7\u0131q havada ke\u00e7irdiyin orta vaxt.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options three\" data-q=\"q4\">\r\n <button class=\"dsvl-option\" data-val=\"cox\"><span class=\"dsvl-option-label\">\u00c7ox<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"orta\"><span class=\"dsvl-option-label\">Orta<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"az\"><span class=\"dsvl-option-label\">Az<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q5\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 05<\/div>\r\n <h2 class=\"dsvl-q-title\">Prioritetin n\u0259dir?<\/h2>\r\n <\/div>\r\n <div class=\"dsvl-options\" data-q=\"q5\">\r\n <button class=\"dsvl-option\" data-val=\"suretli\"><span class=\"dsvl-option-label\">S\u00fcr\u0259tli n\u0259tic\u0259<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"gundelik\"><span class=\"dsvl-option-label\">G\u00fcnd\u0259lik bax\u0131m<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"tam\"><span class=\"dsvl-option-label\">Tam rutin<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"protokol\"><span class=\"dsvl-option-label\">Professional protokol<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"result\" id=\"dsvlResult\"><\/section>\r\n\r\n \r\n <div class=\"dsvl-nav\" id=\"dsvlNav\" style=\"display:none;\">\r\n <button class=\"dsvl-btn-back\" id=\"dsvlBack\">\u2190 Geri<\/button>\r\n <button class=\"dsvl-btn-primary\" id=\"dsvlNext\" disabled>N\u00f6vb\u0259ti<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n \/\/ ---------- PRODUCT CATALOG ----------\r\n const P = {\r\n 'kopuk-mavi': { cat:'T\u0259mizl\u0259yici', name:'pH Balansl\u0131 K\u00f6p\u00fck T\u0259mizl\u0259yici (Quru\/Normal)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/25-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-ph-balanced-mousse-cleanser\/' },\r\n 'kopuk-yasil': { cat:'T\u0259mizl\u0259yici', name:'pH Balansl\u0131 K\u00f6p\u00fck T\u0259mizl\u0259yici (Ya\u011fl\u0131\/Akneli)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/26-600x600.jpg', url:'https:\/\/az.dsvline.com\/akne-deriler-ucun-temizleyici-kopuk\/' },\r\n 'bubble': { cat:'Peeling', name:'Exfoliating & Cleansing Bubble Pads', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/17-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-exfoliating-cleansing-bubble-pads\/' },\r\n 'soft-peeling':{ cat:'Peeling', name:'Soft Peeling \u2014 Z\u0259rif \u00dcz Peeling Kremi', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/13-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-soft-peeling-zerif-uz-peeling-kremi-300ml\/' },\r\n 'imp-mask': { cat:'Maska', name:'Improvement Face Mask', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/22-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-improvement-face-mask-yagli-ve-akneli-deriler-ucun-maska\/' },\r\n 'hydro': { cat:'Tonik', name:'HydroToner', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/2-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-hydrotoner-quru-deriler-ucun-tonik\/' },\r\n 'sebum': { cat:'Tonik', name:'Sebum Purifying Toner', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/8-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-sebum-purifying-toner-yagli-ve-sizanaqli-deriler-ucun-temizleyici-tonik\/' },\r\n 'niasinamid': { cat:'Serum', name:'Niasinamid Serum (15% + 5% Glikolik)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/4-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-anti-wrinkle-anti-dark-spot-niasinamid-serumu\/' },\r\n 'kollagen-c': { cat:'Serum', name:'Firming Antioxidant Kollagen + C Vitamini', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/16-600x600.jpg', url:'https:\/\/az.dsvline.com\/collagen-vitamin-c-serum\/' },\r\n 'saf-c': { cat:'Serum', name:'Brightening 10% C Vitamini', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/Urun_Gorselleri_JPG-600x600.png', url:'https:\/\/az.dsvline.com\/ds-v-line-brightening-10-c-vitamini-serumu\/' },\r\n 'retinol': { cat:'Serum', name:'Lifting & Firming Retinol Serum (0.3% + E)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/7-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-lifting-firming-retinol-e-vitamini-serum\/' },\r\n 'hyaluron': { cat:'Serum', name:'3D Hyaluron Tur\u015fusu Serumu', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/1-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-moisturizing-activator-1-multi-3d-hialuron-tursusu-serumu\/' },\r\n 'bakuchiol': { cat:'G\u00f6z \u00e7evr\u0259si', name:'Deep Repair Bakuchiol & Seramid (G\u00f6z)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/15-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-deep-repair-bakuchiol-seramid-goz-etraif-serumu\/' },\r\n 'sos': { cat:'Spot Serum', name:'Pore Drying SOS Quruducu Serum', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/5-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-sizanaq-quruducu-serum-pore-drying\/' },\r\n 'deep-bha': { cat:'Aktiv Serum', name:'Deep Peeling 10% AHA + 2% BHA', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/14-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-deep-peeling-10-aha-2-bha-serumu\/' },\r\n 'm-360': { cat:'N\u0259ml\u0259ndirici', name:'360 Moisturizer (Quru\/Normal)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/19-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-360-moisturizer-quru-normal-deriler-ucun-nemlendirici\/' },\r\n 'm-777': { cat:'N\u0259ml\u0259ndirici', name:'777 Moisturizer (Ya\u011fl\u0131\/Akneli)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/20-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-777-moisturizer\/' },\r\n 'roller': { cat:'Lifting', name:'V Lifting Roller Kremi', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/9-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-v-lifting-roller-kremi-qiris-eleyhine-sixilasdirici\/' },\r\n 'spf': { cat:'G\u00fcn\u0259\u015f Kremi', name:'Lumea SPF 50+', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/18-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-lumea-spf-50-yaslanma-eleyhine-gunes-kremi\/' },\r\n 'enzyme': { cat:'B\u0259d\u0259n', name:'Revolution Enzyme Powder', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/23-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-revolution-enzyme-powder-cleansing-peeling-enzim-tozu\/' },\r\n 'ozon': { cat:'B\u0259d\u0259n', name:'\u00c7atlaq v\u0259 Sell\u00fclit \u018fleyhin\u0259 Ozon V\u00fccud Serumu', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/10-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-catlaq-ve-sellulit-eleyhine-ozon-vucud-serumu\/' },\r\n 'massage': { cat:'B\u0259d\u0259n', name:'Professional Massage Cream (B\u0259d\u0259n N\u0259ml\u0259ndirici)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/12-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-professional-massage-cream-canlandirici-masaj-kremi\/' }\r\n };\r\n\r\n \/\/ ---------- SCENARIOS ----------\r\n const SCENARIOS = {\r\n s1: {\r\n tag:'Mavi Seriya', tagClass:'mavi',\r\n title:'Quru \/ <em>H\u0259ssas<\/em> d\u0259ri rutini',\r\n desc:'Yum\u015faq t\u0259mizl\u0259yici, sakitl\u0259\u015fdirici n\u0259ml\u0259ndirm\u0259 v\u0259 qoruyucu SPF \u00fc\u00e7\u00fcn dizayn edilib.',\r\n morning: ['kopuk-mavi','bubble','hydro','niasinamid','m-360','spf'],\r\n evening: ['kopuk-mavi','hydro','niasinamid','m-360'],\r\n bubblePerWeek: '2 g\u00fcn',\r\n altTitle:'Gec\u0259 aktivi alternativi',\r\n altText:'H\u0259ft\u0259d\u0259 2 g\u00fcnl\u0259 ba\u015fla, d\u0259ri \u00f6yr\u0259\u015finc\u0259 3-4 g\u00fcn\u0259 qald\u0131r: Lifting & Firming Retinol v\u0259 ya Brightening 10% C Vitamini (kollagensiz).',\r\n altIds:['retinol','saf-c'],\r\n bundle:{ name:'Mavin Seriya \u2014 3-l\u00fc Bax\u0131m D\u0259sti', url:'https:\/\/az.dsvline.com\/mavin-seriya-normal-v\u0259-quru-cilt-uclu-baxim-d\u0259sti\/' }\r\n },\r\n s2: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Ya\u011fl\u0131 \/ <em>S\u0131zanaql\u0131<\/em> d\u0259ri rutini',\r\n desc:'Sebumu t\u0259nziml\u0259yir, m\u0259sam\u0259l\u0259ri t\u0259mizl\u0259yir v\u0259 aktiv komponentl\u0259rl\u0259 s\u0131zanaqlar\u0131 azald\u0131r.',\r\n morning: ['kopuk-yasil','sebum','kollagen-c','m-777','spf'],\r\n evening: ['kopuk-yasil','sebum','sos','m-777'],\r\n altTitle:'H\u0259ft\u0259lik proqram',\r\n altText:'SOS: h\u0259ft\u0259d\u0259 3 g\u00fcn \u00b7 Deep Peeling Serum (BHA): h\u0259ft\u0259d\u0259 2 g\u00fcn \u00b7 Improvement Face Mask: h\u0259ft\u0259d\u0259 1 g\u00fcn \u00b7 Soft Peeling: bo\u015f qalan g\u00fcnl\u0259rd\u0259.',\r\n altIds:['deep-bha','imp-mask','soft-peeling'],\r\n bundle:{ name:'Yasil Seriya \u2014 3-l\u00fc Bax\u0131m D\u0259sti', url:'https:\/\/az.dsvline.com\/yasil-seriya-yagli-cilt-uclu-baxim-d\u0259sti\/' }\r\n },\r\n s3: {\r\n tag:'Anti-Aging', tagClass:'neytral',\r\n title:'Normal d\u0259ri + <em>ya\u015flanma<\/em>',\r\n desc:'Kollagen art\u0131r\u0131c\u0131 serumlar v\u0259 lifting effekti \u00fc\u00e7\u00fcn roller kremi il\u0259 dol\u011fun rutin.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','roller','spf'],\r\n evening: ['kopuk-mavi','hydro','retinol','roller'],\r\n altTitle:'S\u0259h\u0259r serum alternativi',\r\n altText:'Kollagen + C Vitamini v\u0259 ya Brightening 10% C Vitamini. Roller kremi h\u0259r g\u00fcn 15 d\u0259qiq\u0259 istifad\u0259 et.',\r\n altIds:['saf-c'],\r\n bundle:null\r\n },\r\n s4: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Qar\u0131\u015f\u0131q d\u0259ri + <em>l\u0259k\u0259l\u0259r<\/em>',\r\n desc:'Niasinamid t\u0259k yetmir \u2014 aktiv serumla l\u0259k\u0259l\u0259ri h\u0259d\u0259f al\u0131r.',\r\n morning: ['kopuk-yasil','sebum','saf-c','m-777','spf'],\r\n evening: ['kopuk-yasil','sebum','retinol','m-777'],\r\n altTitle:'Aktiv serum alternativi',\r\n altText:'Brightening 10% C v\u0259 ya Lifting & Firming Retinol. Yay aylar\u0131nda retinol az t\u0259rcih edildiyi \u00fc\u00e7\u00fcn h\u0259r iki se\u00e7im g\u00f6st\u0259rilir, q\u0259rar s\u0259nd\u0259dir.',\r\n altIds:['saf-c','retinol'],\r\n bundle:null\r\n },\r\n s5: {\r\n tag:'Sa\u011flam Bax\u0131m', tagClass:'neytral',\r\n title:'Normal d\u0259ri + <em>sa\u011flam bax\u0131m<\/em>',\r\n desc:'Profilaktik rutin: d\u0259riyi cavan v\u0259 hidratl\u0131 saxlamaq \u00fc\u00e7\u00fcn.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','m-360','spf'],\r\n evening: ['kopuk-mavi','hydro','hyaluron','m-360'],\r\n altTitle:'Gec\u0259 n\u0259m serumu alternativi',\r\n altText:'3D Hyaluron Tur\u015fusu v\u0259 ya HydroToner + 360 Moisturizer kombinasiyas\u0131.',\r\n altIds:['hyaluron'],\r\n bundle:null\r\n },\r\n s6: {\r\n tag:'Anti-Aging Pro', tagClass:'neytral',\r\n title:'G\u00f6z \u00e7evr\u0259si q\u0131r\u0131\u015f\u0131q + <em>g\u00fcn\u0259\u015f l\u0259k\u0259si + sallanma<\/em>',\r\n desc:'Bulldog effektin\u0259 qar\u015f\u0131 \u00e7oxqatl\u0131 yana\u015fma: lifting, lokal aktivl\u0259r v\u0259 g\u00f6z \u00e7evr\u0259si qullu\u011fu.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','m-360','roller','spf'],\r\n evening: ['kopuk-mavi','hydro','retinol','bakuchiol','m-360'],\r\n altTitle:'Sallanma \u00fc\u00e7\u00fcn alternativ',\r\n altText:'V Lifting Roller (h\u0259r g\u00fcn 15 d\u0259q) v\u0259 ya Lifting & Firming Retinol Serum (h\u0259ft\u0259d\u0259 2-3 g\u00fcn).',\r\n altIds:['roller','retinol'],\r\n bundle:null\r\n },\r\n s7: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Ya\u011fl\u0131 d\u0259ri + <em>ya\u015flanma<\/em>',\r\n desc:'Ya\u011fl\u0131 d\u0259rid\u0259 ya\u015flanma \u0259lam\u0259tl\u0259ri \u2014 sebumu n\u0259zar\u0259td\u0259 saxlay\u0131r, kollagen istehsal\u0131n\u0131 d\u0259st\u0259kl\u0259yir.',\r\n morning: ['kopuk-yasil','sebum','kollagen-c','m-777','roller','spf'],\r\n evening: ['kopuk-yasil','sebum','retinol','m-777'],\r\n altTitle:'Gec\u0259 aktivi alternativi',\r\n altText:'Lifting & Firming Retinol Serum v\u0259 ya Deep Peeling Serum (ya\u011fl\u0131l\u0131q dominantd\u0131rsa). H\u0259ft\u0259d\u0259 2 g\u00fcnl\u0259 ba\u015fla.',\r\n altIds:['deep-bha'],\r\n bundle:null\r\n },\r\n s8: {\r\n tag:'B\u0259d\u0259n Bax\u0131m\u0131', tagClass:'neytral',\r\n title:'B\u0259d\u0259n <em>qaralmas\u0131<\/em>',\r\n desc:'Koltuqalt\u0131, diz, dirs\u0259k v\u0259 genital b\u00f6lg\u0259l\u0259r \u00fc\u00e7\u00fcn enzimatik t\u0259mizl\u0259m\u0259.',\r\n morning: [],\r\n evening: ['enzyme','massage'],\r\n morningLabel:'Du\u015f ard\u0131c\u0131ll\u0131\u011f\u0131',\r\n eveningLabel:'T\u0259tbiq',\r\n altTitle:'\u0130stifad\u0259 tezliyi',\r\n altText:'H\u0259ssas d\u0259ri \u00fc\u00e7\u00fcn h\u0259ft\u0259d\u0259 1 g\u00fcn il\u0259 ba\u015fla, normal b\u0259d\u0259n d\u0259risi \u00fc\u00e7\u00fcn h\u0259ft\u0259d\u0259 2-3 g\u00fcn.',\r\n altIds:[],\r\n bundle:null\r\n },\r\n s9: {\r\n tag:'B\u0259d\u0259n Bax\u0131m\u0131', tagClass:'neytral',\r\n title:'Sell\u00fclit \/ <em>\u00c7atlaq<\/em>',\r\n desc:'H\u0259d\u0259fli masaj rutini il\u0259 b\u0259d\u0259n serumu v\u0259 n\u0259ml\u0259ndirici kombinasiyas\u0131.',\r\n morning: [],\r\n evening: ['ozon','massage'],\r\n morningLabel:'',\r\n eveningLabel:'G\u00fcnd\u0259lik t\u0259tbiq',\r\n altTitle:'\u0130stifad\u0259',\r\n altText:'\u00c7atlaq \u00fc\u00e7\u00fcn g\u00fcnd\u0259 1 d\u0259f\u0259 h\u0259d\u0259f b\u00f6lg\u0259y\u0259 masaj. Sell\u00fclit \u00fc\u00e7\u00fcn g\u00fcnd\u0259 1-2 d\u0259f\u0259 dair\u0259vi masaj.',\r\n altIds:[],\r\n bundle:null,\r\n clinic:true\r\n }\r\n };\r\n\r\n \/\/ ---------- STATE ----------\r\n const state = {\r\n time:'both', q1:null, q2:null, q3:null, q4:null, q5:null,\r\n stepIndex:0\r\n };\r\n const flow = ['welcome','q1','q2','q3','q4','q5','result'];\r\n\r\n \/\/ ---------- LOGIC ----------\r\n function pickScenario(){\r\n const {q1,q2,q3} = state;\r\n if (q2==='bedenqaralma') return 's8';\r\n if (q2==='catlaq') return 's9';\r\n if (q1==='quru' || q1==='hessas' || q2==='hessas' || q2==='quruluq') return 's1';\r\n if (q1==='yagli'){\r\n if (q2==='qirisiq') return 's7';\r\n if (q2==='sizanaq' || q2==='mesame') return 's2';\r\n return 's2';\r\n }\r\n if (q1==='qarisiq'){\r\n if (q2==='leke') return 's4';\r\n return 's4';\r\n }\r\n if (q1==='normal'){\r\n if (q2==='qirisiq' && (q3==='46+' || q3==='36-45')) return 's6';\r\n if (q2==='qirisiq') return 's3';\r\n if (q2==='leke') return 's4';\r\n return 's5';\r\n }\r\n return 's5';\r\n }\r\n\r\n \/\/ ---------- RENDER ----------\r\n function show(stepName){\r\n document.querySelectorAll('.dsvl-step').forEach(s=>s.classList.remove('active'));\r\n document.querySelector(`[data-step=\"${stepName}\"]`).classList.add('active');\r\n const idx = flow.indexOf(stepName);\r\n state.stepIndex = idx;\r\n\r\n \/\/ Progress bar (visible during questions)\r\n const showProgress = idx>=1 && idx<=5;\r\n document.getElementById('dsvlProgress').style.display = showProgress?'flex':'none';\r\n document.getElementById('dsvlNav').style.display = (idx>=1 && idx<=5)?'flex':'none';\r\n\r\n if(showProgress){\r\n const fill = (idx-0)\/5;\r\n document.getElementById('dsvlProgressFill').style.transform = `scaleX(${fill})`;\r\n document.getElementById('dsvlProgressText').textContent = `${idx} \/ 5`;\r\n }\r\n\r\n \/\/ Update next button state\r\n if(idx>=1 && idx<=5){\r\n const qKey = 'q'+idx;\r\n const enabled = !!state[qKey];\r\n const btn = document.getElementById('dsvlNext');\r\n btn.disabled = !enabled;\r\n btn.textContent = idx===5 ? 'Rutinimi g\u00f6st\u0259r \u2192' : 'N\u00f6vb\u0259ti \u2192';\r\n }\r\n\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n }\r\n\r\n function renderResult(){\r\n const s = SCENARIOS[pickScenario()];\r\n const wantsMorning = state.time==='morning' || state.time==='both';\r\n const wantsEvening = state.time==='evening' || state.time==='both';\r\n const showMorning = wantsMorning && s.morning.length;\r\n const showEvening = wantsEvening && s.evening.length;\r\n\r\n let html = `\r\n <div class=\"dsvl-result-head\">\r\n <div class=\"dsvl-result-tag ${s.tagClass}\">${s.tag}<\/div>\r\n <h2 class=\"dsvl-result-title\">${s.title}<\/h2>\r\n <p class=\"dsvl-result-desc\">${s.desc}<\/p>\r\n <\/div>\r\n `;\r\n\r\n if(showMorning){\r\n html += renderRoutineSection(\r\n s.morningLabel || 'S\u0259h\u0259r rutini',\r\n 'i.',\r\n s.morning,\r\n s.morning.length + ' add\u0131m'\r\n );\r\n }\r\n\r\n if(showEvening){\r\n html += renderRoutineSection(\r\n s.eveningLabel || 'Gec\u0259 rutini',\r\n 'ii.',\r\n s.evening,\r\n s.evening.length + ' add\u0131m'\r\n );\r\n }\r\n\r\n \/\/ Alt block\r\n if(s.altText){\r\n html += `\r\n <div class=\"dsvl-alt-block\">\r\n <div class=\"dsvl-alt-head\">${s.altTitle}<\/div>\r\n <div class=\"dsvl-alt-text\">${s.altText}<\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Important notes\r\n html += `\r\n <div class=\"dsvl-notes warn\">\r\n <div class=\"dsvl-notes-h\">Diqq\u0259t \u2014 tur\u015fulu m\u0259hsullar<\/div>\r\n <div class=\"dsvl-notes-text\">Retinol, saf C vitamini, Deep Peeling Serum v\u0259 SOS h\u0259ft\u0259d\u0259 2 g\u00fcn il\u0259 ba\u015flan\u0131r, d\u0259ri \u00f6yr\u0259\u015finc\u0259 3-4 g\u00fcn\u0259 qald\u0131r\u0131l\u0131r. H\u0259ssas d\u0259ri \u00fc\u00e7\u00fcn ilk istifad\u0259d\u0259n \u0259vv\u0259l test et. S\u0259h\u0259r rutinind\u0259 SPF m\u0259cburidir.<\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Clinic CTA (s9)\r\n if(s.clinic){\r\n html += `\r\n <div class=\"dsvl-notes cta\">\r\n <div class=\"dsvl-notes-h\">Daha s\u00fcr\u0259tli n\u0259tic\u0259 \u00fc\u00e7\u00fcn<\/div>\r\n <div class=\"dsvl-notes-text\">\u00c7atlaq protokolumuz m\u00f6vcuddur. Klinikaya y\u00f6nl\u0259ndirm\u0259 \u00fc\u00e7\u00fcn biziml\u0259 \u0259laq\u0259 saxla \u2014 Ozon Ya\u011f\u0131 i\u015fleml\u0259 birlikd\u0259 daha s\u00fcr\u0259tli n\u0259tic\u0259 verir.<\/div>\r\n <a href=\"#\" class=\"dsvl-step-btn primary\" style=\"display:inline-block;margin-top:14px;text-decoration:none;\">Klinikaya m\u00fcraci\u0259t et<\/a>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Bundle CTA\r\n if(s.bundle){\r\n html += `\r\n <div class=\"dsvl-bundle\">\r\n <div>\r\n <div class=\"dsvl-bundle-h\">${s.bundle.name}<\/div>\r\n <div class=\"dsvl-bundle-p\">Tam d\u0259st\u0259 endirimli qiym\u0259t\u0259<\/div>\r\n <\/div>\r\n <a href=\"${s.bundle.url}\" target=\"_blank\" class=\"dsvl-bundle-btn\">D\u0259st\u0259 bax \u2192<\/a>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Footer actions\r\n html += `\r\n <div class=\"dsvl-footer-actions\">\r\n <button onclick=\"window.dsvlReset()\">Yenid\u0259n ba\u015fla<\/button>\r\n <button onclick=\"window.print()\">Rutini \u00e7ap et<\/button>\r\n <\/div>\r\n `;\r\n\r\n document.getElementById('dsvlResult').innerHTML = html;\r\n }\r\n\r\n function renderRoutineSection(title, icon, productIds, meta){\r\n let items = productIds.map((id,i)=>{\r\n const p = P[id];\r\n if(!p) return '';\r\n return `\r\n <li class=\"dsvl-step-item\">\r\n <div class=\"dsvl-step-num\">${String(i+1).padStart(2,'0')}<\/div>\r\n <div class=\"dsvl-step-img-wrap\"><img decoding=\"async\" class=\"dsvl-step-img\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\"><\/div>\r\n <div class=\"dsvl-step-info\">\r\n <div class=\"dsvl-step-cat\">${p.cat}<\/div>\r\n <div class=\"dsvl-step-name\">${p.name}<\/div>\r\n <\/div>\r\n <div class=\"dsvl-step-actions\">\r\n <a href=\"${p.url}\" target=\"_blank\" class=\"dsvl-step-btn primary\">S\u0259b\u0259t\u0259 \u0259lav\u0259 et<\/a>\r\n <\/div>\r\n <\/li>\r\n `;\r\n }).join('');\r\n\r\n return `\r\n <div class=\"dsvl-routine-section\">\r\n <div class=\"dsvl-routine-head\">\r\n <span class=\"dsvl-routine-icon\">${icon}<\/span>\r\n <h3 class=\"dsvl-routine-h\">${title}<\/h3>\r\n <span class=\"dsvl-routine-meta\">${meta}<\/span>\r\n <\/div>\r\n <ul class=\"dsvl-steps-list\">${items}<\/ul>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ---------- EVENTS ----------\r\n \/\/ Welcome cards\r\n document.querySelectorAll('[data-time]').forEach(b=>{\r\n b.addEventListener('click',()=>{\r\n state.time = b.dataset.time;\r\n show('q1');\r\n });\r\n });\r\n\r\n \/\/ Question option click\r\n document.querySelectorAll('[data-q]').forEach(group=>{\r\n const q = group.dataset.q;\r\n group.querySelectorAll('.dsvl-option').forEach(opt=>{\r\n opt.addEventListener('click',()=>{\r\n group.querySelectorAll('.dsvl-option').forEach(o=>o.classList.remove('selected'));\r\n opt.classList.add('selected');\r\n state[q] = opt.dataset.val;\r\n document.getElementById('dsvlNext').disabled = false;\r\n });\r\n });\r\n });\r\n\r\n \/\/ Nav\r\n document.getElementById('dsvlNext').addEventListener('click',()=>{\r\n const idx = state.stepIndex;\r\n if(idx<5){\r\n show(flow[idx+1]);\r\n } else if(idx===5){\r\n renderResult();\r\n show('result');\r\n }\r\n });\r\n document.getElementById('dsvlBack').addEventListener('click',()=>{\r\n const idx = state.stepIndex;\r\n if(idx>0) show(flow[idx-1]);\r\n });\r\n\r\n \/\/ Reset\r\n window.dsvlReset = function(){\r\n Object.assign(state,{time:'both',q1:null,q2:null,q3:null,q4:null,q5:null,stepIndex:0});\r\n document.querySelectorAll('.dsvl-option.selected').forEach(o=>o.classList.remove('selected'));\r\n show('welcome');\r\n };\r\n\r\n \/\/ Init\r\n show('welcome');\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Rutinini Yarat \u2014 DS V-LINE 1 \/ 5 DS V-Line \u00b7 \u015e\u0259xsi Bax\u0131m Rutinini yarat 5 sual cavabland\u0131r, d\u0259rin\u0259 uy\u011fun s\u0259h\u0259r v\u0259 gec\u0259 rutinini al. H\u0259r add\u0131m s\u0259nin d\u0259ri tipin v\u0259 problemin \u00fc\u00e7\u00fcn haz\u0131rlan\u0131r. i. S\u0259h\u0259r rutini G\u00fcn\u0259 t\u0259miz ba\u015fla ii. Gec\u0259 rutini Yuxudan \u0259vv\u0259l b\u0259rpa iii. H\u0259r ikisi Tam g\u00fcnl\u00fck bax\u0131m Sual 01 D\u0259ri…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bst_post_transparent":"","_bst_post_title":"hide","_bst_post_layout":"fullwidth","_bst_post_sidebar_id":"","_bst_post_content_style":"unboxed","_bst_post_vertical_padding":"hide","_bst_post_feature":"hide","_bst_post_feature_position":"","_bst_post_header":false,"_bst_post_footer":false,"footnotes":""},"class_list":["post-2695","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/comments?post=2695"}],"version-history":[{"count":4,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695\/revisions"}],"predecessor-version":[{"id":2703,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695\/revisions\/2703"}],"wp:attachment":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/media?parent=2695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nRutinini Yarat \u2014 DS V-LINE<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --black: #000000;\r\n --dark: #1C1C1C;\r\n --gray-1: #555555;\r\n --gray-2: #888888;\r\n --gray-3: #BBBBBB;\r\n --bg-light: #F5F5F5;\r\n --bg-soft: #FAFAFA;\r\n --white: #FFFFFF;\r\n --accent: #DE1010;\r\n --mavi: #6BA3C8;\r\n --mavi-soft: #E8F1F7;\r\n --yasil: #7BA888;\r\n --yasil-soft: #EAF2EC;\r\n --border: #E5E5E5;\r\n}\r\n\r\n* { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n.dsvl-app {\r\n font-family: 'Instrument Sans', sans-serif;\r\n color: var(--dark);\r\n background: var(--white);\r\n min-height: 100vh;\r\n padding: 24px 20px 60px;\r\n line-height: 1.5;\r\n}\r\n\r\n.dsvl-app * { box-sizing: border-box; }\r\n\r\n.dsvl-container {\r\n max-width: 980px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* Progress *\/\r\n.dsvl-progress {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 48px;\r\n padding-top: 8px;\r\n}\r\n.dsvl-progress-bar {\r\n flex: 1;\r\n height: 2px;\r\n background: var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.dsvl-progress-fill {\r\n position: absolute;\r\n inset: 0;\r\n background: var(--black);\r\n transform-origin: left;\r\n transform: scaleX(0);\r\n transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);\r\n}\r\n.dsvl-progress-text {\r\n font-size: 12px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n font-weight: 500;\r\n min-width: 56px;\r\n text-align: right;\r\n}\r\n\r\n\/* Step container *\/\r\n.dsvl-step {\r\n display: none;\r\n animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.dsvl-step.active { display: block; }\r\n\r\n@keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(12px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n\/* Hero \/ welcome *\/\r\n.dsvl-hero {\r\n text-align: center;\r\n padding: 40px 0 56px;\r\n}\r\n.dsvl-eyebrow {\r\n font-size: 12px;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n font-weight: 500;\r\n margin-bottom: 24px;\r\n}\r\n.dsvl-h1 {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(38px, 6vw, 64px);\r\n font-weight: 400;\r\n line-height: 1.05;\r\n letter-spacing: -0.02em;\r\n margin-bottom: 18px;\r\n}\r\n.dsvl-h1 em {\r\n font-style: italic;\r\n color: var(--gray-1);\r\n}\r\n.dsvl-sub {\r\n font-size: 17px;\r\n color: var(--gray-1);\r\n max-width: 520px;\r\n margin: 0 auto 40px;\r\n line-height: 1.55;\r\n}\r\n\r\n\/* Welcome cards *\/\r\n.dsvl-welcome-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n max-width: 720px;\r\n margin: 0 auto;\r\n}\r\n.dsvl-welcome-card {\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n padding: 36px 24px;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n text-align: left;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.dsvl-welcome-card:hover {\r\n background: var(--black);\r\n color: var(--white);\r\n border-color: var(--black);\r\n transform: translateY(-2px);\r\n}\r\n.dsvl-welcome-icon {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 32px;\r\n font-style: italic;\r\n margin-bottom: 32px;\r\n display: block;\r\n}\r\n.dsvl-welcome-card h3 {\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin-bottom: 6px;\r\n}\r\n.dsvl-welcome-card p {\r\n font-size: 13px;\r\n color: var(--gray-2);\r\n line-height: 1.4;\r\n}\r\n.dsvl-welcome-card:hover p { color: var(--gray-3); }\r\n\r\n\/* Question *\/\r\n.dsvl-q-head {\r\n margin-bottom: 36px;\r\n max-width: 680px;\r\n}\r\n.dsvl-q-num {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 14px;\r\n color: var(--gray-2);\r\n margin-bottom: 12px;\r\n}\r\n.dsvl-q-title {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(28px, 4vw, 40px);\r\n font-weight: 400;\r\n line-height: 1.15;\r\n letter-spacing: -0.01em;\r\n margin-bottom: 10px;\r\n}\r\n.dsvl-q-help {\r\n font-size: 14px;\r\n color: var(--gray-1);\r\n}\r\n\r\n.dsvl-options {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n}\r\n.dsvl-options.three { grid-template-columns: repeat(3, 1fr); }\r\n.dsvl-options.four { grid-template-columns: repeat(4, 1fr); }\r\n\r\n.dsvl-option {\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n padding: 22px 22px;\r\n cursor: pointer;\r\n text-align: left;\r\n font-family: inherit;\r\n font-size: 15px;\r\n color: var(--dark);\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n min-height: 72px;\r\n}\r\n.dsvl-option:hover {\r\n border-color: var(--black);\r\n background: var(--bg-soft);\r\n}\r\n.dsvl-option.selected {\r\n background: var(--black);\r\n color: var(--white);\r\n border-color: var(--black);\r\n}\r\n.dsvl-option-label {\r\n font-weight: 500;\r\n}\r\n.dsvl-option-arrow {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n opacity: 0;\r\n transition: opacity 0.2s;\r\n}\r\n.dsvl-option:hover .dsvl-option-arrow,\r\n.dsvl-option.selected .dsvl-option-arrow { opacity: 1; }\r\n\r\n\/* Nav *\/\r\n.dsvl-nav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-top: 40px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--border);\r\n}\r\n.dsvl-btn-back {\r\n background: none;\r\n border: none;\r\n font-family: inherit;\r\n font-size: 14px;\r\n color: var(--gray-1);\r\n cursor: pointer;\r\n letter-spacing: 0.04em;\r\n padding: 8px 0;\r\n}\r\n.dsvl-btn-back:hover { color: var(--black); }\r\n.dsvl-btn-back:disabled { opacity: 0.3; cursor: not-allowed; }\r\n\r\n.dsvl-btn-primary {\r\n background: var(--black);\r\n color: var(--white);\r\n border: none;\r\n padding: 14px 28px;\r\n font-family: inherit;\r\n font-size: 14px;\r\n font-weight: 500;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n.dsvl-btn-primary:hover { background: var(--dark); transform: translateX(2px); }\r\n.dsvl-btn-primary:disabled {\r\n background: var(--gray-3);\r\n cursor: not-allowed;\r\n transform: none;\r\n}\r\n\r\n\/* Result *\/\r\n.dsvl-result-head {\r\n text-align: center;\r\n padding: 12px 0 40px;\r\n border-bottom: 1px solid var(--border);\r\n margin-bottom: 48px;\r\n}\r\n.dsvl-result-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n padding: 6px 12px;\r\n border: 1px solid currentColor;\r\n margin-bottom: 24px;\r\n}\r\n.dsvl-result-tag.mavi { color: var(--mavi); }\r\n.dsvl-result-tag.yasil { color: var(--yasil); }\r\n.dsvl-result-tag.neytral { color: var(--gray-1); }\r\n\r\n.dsvl-result-title {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: clamp(32px, 5vw, 48px);\r\n font-weight: 400;\r\n line-height: 1.1;\r\n letter-spacing: -0.015em;\r\n max-width: 680px;\r\n margin: 0 auto 16px;\r\n}\r\n.dsvl-result-title em { font-style: italic; color: var(--gray-1); }\r\n.dsvl-result-desc {\r\n font-size: 15px;\r\n color: var(--gray-1);\r\n max-width: 560px;\r\n margin: 0 auto;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* Routine sections *\/\r\n.dsvl-routine-section { margin-bottom: 64px; }\r\n.dsvl-routine-head {\r\n display: flex;\r\n align-items: baseline;\r\n gap: 14px;\r\n margin-bottom: 28px;\r\n padding-bottom: 14px;\r\n border-bottom: 1px solid var(--border);\r\n}\r\n.dsvl-routine-icon {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 28px;\r\n color: var(--gray-2);\r\n}\r\n.dsvl-routine-h {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 26px;\r\n font-weight: 400;\r\n letter-spacing: -0.01em;\r\n}\r\n.dsvl-routine-meta {\r\n margin-left: auto;\r\n font-size: 12px;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--gray-2);\r\n font-weight: 500;\r\n}\r\n\r\n\/* Step list *\/\r\n.dsvl-steps-list {\r\n list-style: none;\r\n display: grid;\r\n gap: 14px;\r\n}\r\n.dsvl-step-item {\r\n display: grid;\r\n grid-template-columns: 56px 110px 1fr auto;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 16px 20px;\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n transition: all 0.2s;\r\n}\r\n.dsvl-step-item:hover {\r\n background: var(--white);\r\n border-color: var(--dark);\r\n}\r\n.dsvl-step-num {\r\n font-family: 'Instrument Serif', serif;\r\n font-style: italic;\r\n font-size: 32px;\r\n color: var(--gray-3);\r\n line-height: 1;\r\n}\r\n.dsvl-step-img-wrap {\r\n width: 110px;\r\n height: 110px;\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.dsvl-step-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n mix-blend-mode: multiply;\r\n}\r\n.dsvl-step-info { min-width: 0; }\r\n.dsvl-step-cat {\r\n font-size: 11px;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--gray-2);\r\n font-weight: 500;\r\n margin-bottom: 4px;\r\n}\r\n.dsvl-step-name {\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n line-height: 1.3;\r\n}\r\n.dsvl-step-note {\r\n font-size: 13px;\r\n color: var(--gray-1);\r\n line-height: 1.4;\r\n}\r\n.dsvl-step-actions {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n align-items: flex-end;\r\n}\r\n.dsvl-step-btn {\r\n font-size: 12px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n font-weight: 500;\r\n text-decoration: none;\r\n padding: 8px 14px;\r\n white-space: nowrap;\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n border: 1px solid var(--black);\r\n font-family: inherit;\r\n}\r\n.dsvl-step-btn.primary { background: var(--black); color: var(--white); }\r\n.dsvl-step-btn.primary:hover { background: var(--dark); }\r\n.dsvl-step-btn.ghost { background: var(--white); color: var(--black); }\r\n.dsvl-step-btn.ghost:hover { background: var(--black); color: var(--white); }\r\n\r\n\/* Alternatives *\/\r\n.dsvl-alt-block {\r\n margin-top: 32px;\r\n padding: 24px;\r\n background: var(--bg-soft);\r\n border-left: 2px solid var(--gray-3);\r\n}\r\n.dsvl-alt-head {\r\n font-size: 12px;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n color: var(--gray-1);\r\n margin-bottom: 12px;\r\n}\r\n.dsvl-alt-text {\r\n font-size: 14px;\r\n line-height: 1.55;\r\n color: var(--dark);\r\n}\r\n\r\n\/* Notes \/ disclaimers *\/\r\n.dsvl-notes {\r\n background: var(--mavi-soft);\r\n padding: 24px 28px;\r\n margin: 40px 0;\r\n border-left: 3px solid var(--mavi);\r\n}\r\n.dsvl-notes.warn {\r\n background: #FFF7E6;\r\n border-left-color: #F0A500;\r\n}\r\n.dsvl-notes.cta {\r\n background: var(--bg-soft);\r\n border-left-color: var(--black);\r\n}\r\n.dsvl-notes-h {\r\n font-weight: 600;\r\n font-size: 14px;\r\n margin-bottom: 8px;\r\n letter-spacing: 0.02em;\r\n}\r\n.dsvl-notes-text {\r\n font-size: 14px;\r\n line-height: 1.6;\r\n color: var(--dark);\r\n}\r\n\r\n\/* Bundle CTA *\/\r\n.dsvl-bundle {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n align-items: center;\r\n gap: 24px;\r\n padding: 32px;\r\n background: var(--black);\r\n color: var(--white);\r\n margin-top: 56px;\r\n}\r\n.dsvl-bundle-h {\r\n font-family: 'Instrument Serif', serif;\r\n font-size: 24px;\r\n margin-bottom: 6px;\r\n}\r\n.dsvl-bundle-p {\r\n font-size: 14px;\r\n color: var(--gray-3);\r\n}\r\n.dsvl-bundle-btn {\r\n background: var(--white);\r\n color: var(--black);\r\n padding: 16px 28px;\r\n text-decoration: none;\r\n font-size: 13px;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n transition: all 0.2s;\r\n white-space: nowrap;\r\n}\r\n.dsvl-bundle-btn:hover { background: var(--accent); color: var(--white); }\r\n\r\n\/* Footer actions *\/\r\n.dsvl-footer-actions {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 64px;\r\n padding-top: 32px;\r\n border-top: 1px solid var(--border);\r\n}\r\n.dsvl-footer-actions button {\r\n background: none;\r\n border: 1px solid var(--border);\r\n font-family: inherit;\r\n font-size: 13px;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n color: var(--gray-1);\r\n padding: 12px 20px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n.dsvl-footer-actions button:hover {\r\n border-color: var(--black);\r\n color: var(--black);\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 720px) {\r\n .dsvl-app { padding: 16px 14px 40px; }\r\n .dsvl-hero { padding: 24px 0 40px; }\r\n .dsvl-welcome-grid { grid-template-columns: 1fr; }\r\n .dsvl-options, .dsvl-options.three, .dsvl-options.four {\r\n grid-template-columns: 1fr;\r\n }\r\n .dsvl-step-item {\r\n grid-template-columns: 80px 1fr;\r\n grid-template-rows: auto auto;\r\n gap: 14px;\r\n padding: 14px;\r\n }\r\n .dsvl-step-num { display: none; }\r\n .dsvl-step-img-wrap { width: 80px; height: 80px; }\r\n .dsvl-step-actions {\r\n grid-column: 1 \/ -1;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n }\r\n .dsvl-bundle { grid-template-columns: 1fr; text-align: center; }\r\n .dsvl-routine-meta { display: none; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"dsvl-app\">\r\n <div class=\"dsvl-container\">\r\n\r\n \r\n <div class=\"dsvl-progress\" id=\"dsvlProgress\" style=\"display:none;\">\r\n <div class=\"dsvl-progress-bar\"><div class=\"dsvl-progress-fill\" id=\"dsvlProgressFill\"><\/div><\/div>\r\n <div class=\"dsvl-progress-text\" id=\"dsvlProgressText\">1 \/ 5<\/div>\r\n <\/div>\r\n\r\n \r\n <section class=\"dsvl-step active\" data-step=\"welcome\">\r\n <div class=\"dsvl-hero\">\r\n <div class=\"dsvl-eyebrow\">DS V-Line \u00b7 \u015e\u0259xsi Bax\u0131m<\/div>\r\n <h1 class=\"dsvl-h1\">Rutinini <em>yarat<\/em><\/h1>\r\n <p class=\"dsvl-sub\">5 sual cavabland\u0131r, d\u0259rin\u0259 uy\u011fun s\u0259h\u0259r v\u0259 gec\u0259 rutinini al. H\u0259r add\u0131m s\u0259nin d\u0259ri tipin v\u0259 problemin \u00fc\u00e7\u00fcn haz\u0131rlan\u0131r.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-welcome-grid\">\r\n <button class=\"dsvl-welcome-card\" data-time=\"morning\">\r\n <span class=\"dsvl-welcome-icon\">i.<\/span>\r\n <h3>S\u0259h\u0259r rutini<\/h3>\r\n <p>G\u00fcn\u0259 t\u0259miz ba\u015fla<\/p>\r\n <\/button>\r\n <button class=\"dsvl-welcome-card\" data-time=\"evening\">\r\n <span class=\"dsvl-welcome-icon\">ii.<\/span>\r\n <h3>Gec\u0259 rutini<\/h3>\r\n <p>Yuxudan \u0259vv\u0259l b\u0259rpa<\/p>\r\n <\/button>\r\n <button class=\"dsvl-welcome-card\" data-time=\"both\">\r\n <span class=\"dsvl-welcome-icon\">iii.<\/span>\r\n <h3>H\u0259r ikisi<\/h3>\r\n <p>Tam g\u00fcnl\u00fck bax\u0131m<\/p>\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q1\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 01<\/div>\r\n <h2 class=\"dsvl-q-title\">D\u0259ri tipiniz n\u0259dir?<\/h2>\r\n <p class=\"dsvl-q-help\">\u018fmin deyils\u0259ns\u0259, \u00fcz\u00fcn\u00fc yumadan 1 saat sonra T-zonana bax.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options\" data-q=\"q1\">\r\n <button class=\"dsvl-option\" data-val=\"quru\"><span class=\"dsvl-option-label\">Quru \/ H\u0259ssas<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"normal\"><span class=\"dsvl-option-label\">Normal<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"yagli\"><span class=\"dsvl-option-label\">Ya\u011fl\u0131 \/ S\u0131zanaql\u0131<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"qarisiq\"><span class=\"dsvl-option-label\">Qar\u0131\u015f\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q2\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 02<\/div>\r\n <h2 class=\"dsvl-q-title\">\u018fsas problemin n\u0259dir?<\/h2>\r\n <p class=\"dsvl-q-help\">S\u0259ni \u0259n \u00e7ox narahat ed\u0259n bir problemi se\u00e7.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options three\" data-q=\"q2\">\r\n <button class=\"dsvl-option\" data-val=\"qirisiq\"><span class=\"dsvl-option-label\">Q\u0131r\u0131\u015f\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"quruluq\"><span class=\"dsvl-option-label\">Quruluq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"sizanaq\"><span class=\"dsvl-option-label\">S\u0131zanaq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"mesame\"><span class=\"dsvl-option-label\">Geni\u015f m\u0259sam\u0259l\u0259r<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"leke\"><span class=\"dsvl-option-label\">L\u0259k\u0259l\u0259r<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"hessas\"><span class=\"dsvl-option-label\">H\u0259ssasl\u0131q<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"problemyox\"><span class=\"dsvl-option-label\">Problem yoxdur<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"bedenqaralma\"><span class=\"dsvl-option-label\">B\u0259d\u0259n qaralmas\u0131<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"catlaq\"><span class=\"dsvl-option-label\">Sell\u00fclit \/ \u00c7atlaq<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q3\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 03<\/div>\r\n <h2 class=\"dsvl-q-title\">Ya\u015f qrupun?<\/h2>\r\n <\/div>\r\n <div class=\"dsvl-options four\" data-q=\"q3\">\r\n <button class=\"dsvl-option\" data-val=\"18-25\"><span class=\"dsvl-option-label\">18 \u2014 25<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"26-35\"><span class=\"dsvl-option-label\">26 \u2014 35<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"36-45\"><span class=\"dsvl-option-label\">36 \u2014 45<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"46+\"><span class=\"dsvl-option-label\">46+<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q4\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 04<\/div>\r\n <h2 class=\"dsvl-q-title\">G\u00fcn\u0259\u015f\u0259 n\u0259 q\u0259d\u0259r m\u0259ruz qal\u0131rsan?<\/h2>\r\n <p class=\"dsvl-q-help\">A\u00e7\u0131q havada ke\u00e7irdiyin orta vaxt.<\/p>\r\n <\/div>\r\n <div class=\"dsvl-options three\" data-q=\"q4\">\r\n <button class=\"dsvl-option\" data-val=\"cox\"><span class=\"dsvl-option-label\">\u00c7ox<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"orta\"><span class=\"dsvl-option-label\">Orta<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"az\"><span class=\"dsvl-option-label\">Az<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"q5\">\r\n <div class=\"dsvl-q-head\">\r\n <div class=\"dsvl-q-num\">Sual 05<\/div>\r\n <h2 class=\"dsvl-q-title\">Prioritetin n\u0259dir?<\/h2>\r\n <\/div>\r\n <div class=\"dsvl-options\" data-q=\"q5\">\r\n <button class=\"dsvl-option\" data-val=\"suretli\"><span class=\"dsvl-option-label\">S\u00fcr\u0259tli n\u0259tic\u0259<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"gundelik\"><span class=\"dsvl-option-label\">G\u00fcnd\u0259lik bax\u0131m<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"tam\"><span class=\"dsvl-option-label\">Tam rutin<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <button class=\"dsvl-option\" data-val=\"protokol\"><span class=\"dsvl-option-label\">Professional protokol<\/span><span class=\"dsvl-option-arrow\">\u2192<\/span><\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"dsvl-step\" data-step=\"result\" id=\"dsvlResult\"><\/section>\r\n\r\n \r\n <div class=\"dsvl-nav\" id=\"dsvlNav\" style=\"display:none;\">\r\n <button class=\"dsvl-btn-back\" id=\"dsvlBack\">\u2190 Geri<\/button>\r\n <button class=\"dsvl-btn-primary\" id=\"dsvlNext\" disabled>N\u00f6vb\u0259ti<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n \/\/ ---------- PRODUCT CATALOG ----------\r\n const P = {\r\n 'kopuk-mavi': { cat:'T\u0259mizl\u0259yici', name:'pH Balansl\u0131 K\u00f6p\u00fck T\u0259mizl\u0259yici (Quru\/Normal)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/25-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-ph-balanced-mousse-cleanser\/' },\r\n 'kopuk-yasil': { cat:'T\u0259mizl\u0259yici', name:'pH Balansl\u0131 K\u00f6p\u00fck T\u0259mizl\u0259yici (Ya\u011fl\u0131\/Akneli)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/26-600x600.jpg', url:'https:\/\/az.dsvline.com\/akne-deriler-ucun-temizleyici-kopuk\/' },\r\n 'bubble': { cat:'Peeling', name:'Exfoliating & Cleansing Bubble Pads', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/17-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-exfoliating-cleansing-bubble-pads\/' },\r\n 'soft-peeling':{ cat:'Peeling', name:'Soft Peeling \u2014 Z\u0259rif \u00dcz Peeling Kremi', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/13-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-soft-peeling-zerif-uz-peeling-kremi-300ml\/' },\r\n 'imp-mask': { cat:'Maska', name:'Improvement Face Mask', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/22-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-improvement-face-mask-yagli-ve-akneli-deriler-ucun-maska\/' },\r\n 'hydro': { cat:'Tonik', name:'HydroToner', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/2-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-hydrotoner-quru-deriler-ucun-tonik\/' },\r\n 'sebum': { cat:'Tonik', name:'Sebum Purifying Toner', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/8-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-sebum-purifying-toner-yagli-ve-sizanaqli-deriler-ucun-temizleyici-tonik\/' },\r\n 'niasinamid': { cat:'Serum', name:'Niasinamid Serum (15% + 5% Glikolik)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/4-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-anti-wrinkle-anti-dark-spot-niasinamid-serumu\/' },\r\n 'kollagen-c': { cat:'Serum', name:'Firming Antioxidant Kollagen + C Vitamini', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/16-600x600.jpg', url:'https:\/\/az.dsvline.com\/collagen-vitamin-c-serum\/' },\r\n 'saf-c': { cat:'Serum', name:'Brightening 10% C Vitamini', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/Urun_Gorselleri_JPG-600x600.png', url:'https:\/\/az.dsvline.com\/ds-v-line-brightening-10-c-vitamini-serumu\/' },\r\n 'retinol': { cat:'Serum', name:'Lifting & Firming Retinol Serum (0.3% + E)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/7-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-lifting-firming-retinol-e-vitamini-serum\/' },\r\n 'hyaluron': { cat:'Serum', name:'3D Hyaluron Tur\u015fusu Serumu', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/1-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-moisturizing-activator-1-multi-3d-hialuron-tursusu-serumu\/' },\r\n 'bakuchiol': { cat:'G\u00f6z \u00e7evr\u0259si', name:'Deep Repair Bakuchiol & Seramid (G\u00f6z)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/15-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-deep-repair-bakuchiol-seramid-goz-etraif-serumu\/' },\r\n 'sos': { cat:'Spot Serum', name:'Pore Drying SOS Quruducu Serum', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/5-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-sizanaq-quruducu-serum-pore-drying\/' },\r\n 'deep-bha': { cat:'Aktiv Serum', name:'Deep Peeling 10% AHA + 2% BHA', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/14-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-deep-peeling-10-aha-2-bha-serumu\/' },\r\n 'm-360': { cat:'N\u0259ml\u0259ndirici', name:'360 Moisturizer (Quru\/Normal)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/19-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-360-moisturizer-quru-normal-deriler-ucun-nemlendirici\/' },\r\n 'm-777': { cat:'N\u0259ml\u0259ndirici', name:'777 Moisturizer (Ya\u011fl\u0131\/Akneli)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/20-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-777-moisturizer\/' },\r\n 'roller': { cat:'Lifting', name:'V Lifting Roller Kremi', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/9-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-v-lifting-roller-kremi-qiris-eleyhine-sixilasdirici\/' },\r\n 'spf': { cat:'G\u00fcn\u0259\u015f Kremi', name:'Lumea SPF 50+', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/18-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-lumea-spf-50-yaslanma-eleyhine-gunes-kremi\/' },\r\n 'enzyme': { cat:'B\u0259d\u0259n', name:'Revolution Enzyme Powder', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/23-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-revolution-enzyme-powder-cleansing-peeling-enzim-tozu\/' },\r\n 'ozon': { cat:'B\u0259d\u0259n', name:'\u00c7atlaq v\u0259 Sell\u00fclit \u018fleyhin\u0259 Ozon V\u00fccud Serumu', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/10-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-catlaq-ve-sellulit-eleyhine-ozon-vucud-serumu\/' },\r\n 'massage': { cat:'B\u0259d\u0259n', name:'Professional Massage Cream (B\u0259d\u0259n N\u0259ml\u0259ndirici)', img:'https:\/\/az.dsvline.com\/wp-content\/uploads\/2026\/02\/12-600x600.jpg', url:'https:\/\/az.dsvline.com\/ds-v-line-professional-massage-cream-canlandirici-masaj-kremi\/' }\r\n };\r\n\r\n \/\/ ---------- SCENARIOS ----------\r\n const SCENARIOS = {\r\n s1: {\r\n tag:'Mavi Seriya', tagClass:'mavi',\r\n title:'Quru \/ <em>H\u0259ssas<\/em> d\u0259ri rutini',\r\n desc:'Yum\u015faq t\u0259mizl\u0259yici, sakitl\u0259\u015fdirici n\u0259ml\u0259ndirm\u0259 v\u0259 qoruyucu SPF \u00fc\u00e7\u00fcn dizayn edilib.',\r\n morning: ['kopuk-mavi','bubble','hydro','niasinamid','m-360','spf'],\r\n evening: ['kopuk-mavi','hydro','niasinamid','m-360'],\r\n bubblePerWeek: '2 g\u00fcn',\r\n altTitle:'Gec\u0259 aktivi alternativi',\r\n altText:'H\u0259ft\u0259d\u0259 2 g\u00fcnl\u0259 ba\u015fla, d\u0259ri \u00f6yr\u0259\u015finc\u0259 3-4 g\u00fcn\u0259 qald\u0131r: Lifting & Firming Retinol v\u0259 ya Brightening 10% C Vitamini (kollagensiz).',\r\n altIds:['retinol','saf-c'],\r\n bundle:{ name:'Mavin Seriya \u2014 3-l\u00fc Bax\u0131m D\u0259sti', url:'https:\/\/az.dsvline.com\/mavin-seriya-normal-v\u0259-quru-cilt-uclu-baxim-d\u0259sti\/' }\r\n },\r\n s2: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Ya\u011fl\u0131 \/ <em>S\u0131zanaql\u0131<\/em> d\u0259ri rutini',\r\n desc:'Sebumu t\u0259nziml\u0259yir, m\u0259sam\u0259l\u0259ri t\u0259mizl\u0259yir v\u0259 aktiv komponentl\u0259rl\u0259 s\u0131zanaqlar\u0131 azald\u0131r.',\r\n morning: ['kopuk-yasil','sebum','kollagen-c','m-777','spf'],\r\n evening: ['kopuk-yasil','sebum','sos','m-777'],\r\n altTitle:'H\u0259ft\u0259lik proqram',\r\n altText:'SOS: h\u0259ft\u0259d\u0259 3 g\u00fcn \u00b7 Deep Peeling Serum (BHA): h\u0259ft\u0259d\u0259 2 g\u00fcn \u00b7 Improvement Face Mask: h\u0259ft\u0259d\u0259 1 g\u00fcn \u00b7 Soft Peeling: bo\u015f qalan g\u00fcnl\u0259rd\u0259.',\r\n altIds:['deep-bha','imp-mask','soft-peeling'],\r\n bundle:{ name:'Yasil Seriya \u2014 3-l\u00fc Bax\u0131m D\u0259sti', url:'https:\/\/az.dsvline.com\/yasil-seriya-yagli-cilt-uclu-baxim-d\u0259sti\/' }\r\n },\r\n s3: {\r\n tag:'Anti-Aging', tagClass:'neytral',\r\n title:'Normal d\u0259ri + <em>ya\u015flanma<\/em>',\r\n desc:'Kollagen art\u0131r\u0131c\u0131 serumlar v\u0259 lifting effekti \u00fc\u00e7\u00fcn roller kremi il\u0259 dol\u011fun rutin.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','roller','spf'],\r\n evening: ['kopuk-mavi','hydro','retinol','roller'],\r\n altTitle:'S\u0259h\u0259r serum alternativi',\r\n altText:'Kollagen + C Vitamini v\u0259 ya Brightening 10% C Vitamini. Roller kremi h\u0259r g\u00fcn 15 d\u0259qiq\u0259 istifad\u0259 et.',\r\n altIds:['saf-c'],\r\n bundle:null\r\n },\r\n s4: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Qar\u0131\u015f\u0131q d\u0259ri + <em>l\u0259k\u0259l\u0259r<\/em>',\r\n desc:'Niasinamid t\u0259k yetmir \u2014 aktiv serumla l\u0259k\u0259l\u0259ri h\u0259d\u0259f al\u0131r.',\r\n morning: ['kopuk-yasil','sebum','saf-c','m-777','spf'],\r\n evening: ['kopuk-yasil','sebum','retinol','m-777'],\r\n altTitle:'Aktiv serum alternativi',\r\n altText:'Brightening 10% C v\u0259 ya Lifting & Firming Retinol. Yay aylar\u0131nda retinol az t\u0259rcih edildiyi \u00fc\u00e7\u00fcn h\u0259r iki se\u00e7im g\u00f6st\u0259rilir, q\u0259rar s\u0259nd\u0259dir.',\r\n altIds:['saf-c','retinol'],\r\n bundle:null\r\n },\r\n s5: {\r\n tag:'Sa\u011flam Bax\u0131m', tagClass:'neytral',\r\n title:'Normal d\u0259ri + <em>sa\u011flam bax\u0131m<\/em>',\r\n desc:'Profilaktik rutin: d\u0259riyi cavan v\u0259 hidratl\u0131 saxlamaq \u00fc\u00e7\u00fcn.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','m-360','spf'],\r\n evening: ['kopuk-mavi','hydro','hyaluron','m-360'],\r\n altTitle:'Gec\u0259 n\u0259m serumu alternativi',\r\n altText:'3D Hyaluron Tur\u015fusu v\u0259 ya HydroToner + 360 Moisturizer kombinasiyas\u0131.',\r\n altIds:['hyaluron'],\r\n bundle:null\r\n },\r\n s6: {\r\n tag:'Anti-Aging Pro', tagClass:'neytral',\r\n title:'G\u00f6z \u00e7evr\u0259si q\u0131r\u0131\u015f\u0131q + <em>g\u00fcn\u0259\u015f l\u0259k\u0259si + sallanma<\/em>',\r\n desc:'Bulldog effektin\u0259 qar\u015f\u0131 \u00e7oxqatl\u0131 yana\u015fma: lifting, lokal aktivl\u0259r v\u0259 g\u00f6z \u00e7evr\u0259si qullu\u011fu.',\r\n morning: ['kopuk-mavi','hydro','kollagen-c','m-360','roller','spf'],\r\n evening: ['kopuk-mavi','hydro','retinol','bakuchiol','m-360'],\r\n altTitle:'Sallanma \u00fc\u00e7\u00fcn alternativ',\r\n altText:'V Lifting Roller (h\u0259r g\u00fcn 15 d\u0259q) v\u0259 ya Lifting & Firming Retinol Serum (h\u0259ft\u0259d\u0259 2-3 g\u00fcn).',\r\n altIds:['roller','retinol'],\r\n bundle:null\r\n },\r\n s7: {\r\n tag:'Ya\u015f\u0131l Seriya', tagClass:'yasil',\r\n title:'Ya\u011fl\u0131 d\u0259ri + <em>ya\u015flanma<\/em>',\r\n desc:'Ya\u011fl\u0131 d\u0259rid\u0259 ya\u015flanma \u0259lam\u0259tl\u0259ri \u2014 sebumu n\u0259zar\u0259td\u0259 saxlay\u0131r, kollagen istehsal\u0131n\u0131 d\u0259st\u0259kl\u0259yir.',\r\n morning: ['kopuk-yasil','sebum','kollagen-c','m-777','roller','spf'],\r\n evening: ['kopuk-yasil','sebum','retinol','m-777'],\r\n altTitle:'Gec\u0259 aktivi alternativi',\r\n altText:'Lifting & Firming Retinol Serum v\u0259 ya Deep Peeling Serum (ya\u011fl\u0131l\u0131q dominantd\u0131rsa). H\u0259ft\u0259d\u0259 2 g\u00fcnl\u0259 ba\u015fla.',\r\n altIds:['deep-bha'],\r\n bundle:null\r\n },\r\n s8: {\r\n tag:'B\u0259d\u0259n Bax\u0131m\u0131', tagClass:'neytral',\r\n title:'B\u0259d\u0259n <em>qaralmas\u0131<\/em>',\r\n desc:'Koltuqalt\u0131, diz, dirs\u0259k v\u0259 genital b\u00f6lg\u0259l\u0259r \u00fc\u00e7\u00fcn enzimatik t\u0259mizl\u0259m\u0259.',\r\n morning: [],\r\n evening: ['enzyme','massage'],\r\n morningLabel:'Du\u015f ard\u0131c\u0131ll\u0131\u011f\u0131',\r\n eveningLabel:'T\u0259tbiq',\r\n altTitle:'\u0130stifad\u0259 tezliyi',\r\n altText:'H\u0259ssas d\u0259ri \u00fc\u00e7\u00fcn h\u0259ft\u0259d\u0259 1 g\u00fcn il\u0259 ba\u015fla, normal b\u0259d\u0259n d\u0259risi \u00fc\u00e7\u00fcn h\u0259ft\u0259d\u0259 2-3 g\u00fcn.',\r\n altIds:[],\r\n bundle:null\r\n },\r\n s9: {\r\n tag:'B\u0259d\u0259n Bax\u0131m\u0131', tagClass:'neytral',\r\n title:'Sell\u00fclit \/ <em>\u00c7atlaq<\/em>',\r\n desc:'H\u0259d\u0259fli masaj rutini il\u0259 b\u0259d\u0259n serumu v\u0259 n\u0259ml\u0259ndirici kombinasiyas\u0131.',\r\n morning: [],\r\n evening: ['ozon','massage'],\r\n morningLabel:'',\r\n eveningLabel:'G\u00fcnd\u0259lik t\u0259tbiq',\r\n altTitle:'\u0130stifad\u0259',\r\n altText:'\u00c7atlaq \u00fc\u00e7\u00fcn g\u00fcnd\u0259 1 d\u0259f\u0259 h\u0259d\u0259f b\u00f6lg\u0259y\u0259 masaj. Sell\u00fclit \u00fc\u00e7\u00fcn g\u00fcnd\u0259 1-2 d\u0259f\u0259 dair\u0259vi masaj.',\r\n altIds:[],\r\n bundle:null,\r\n clinic:true\r\n }\r\n };\r\n\r\n \/\/ ---------- STATE ----------\r\n const state = {\r\n time:'both', q1:null, q2:null, q3:null, q4:null, q5:null,\r\n stepIndex:0\r\n };\r\n const flow = ['welcome','q1','q2','q3','q4','q5','result'];\r\n\r\n \/\/ ---------- LOGIC ----------\r\n function pickScenario(){\r\n const {q1,q2,q3} = state;\r\n if (q2==='bedenqaralma') return 's8';\r\n if (q2==='catlaq') return 's9';\r\n if (q1==='quru' || q1==='hessas' || q2==='hessas' || q2==='quruluq') return 's1';\r\n if (q1==='yagli'){\r\n if (q2==='qirisiq') return 's7';\r\n if (q2==='sizanaq' || q2==='mesame') return 's2';\r\n return 's2';\r\n }\r\n if (q1==='qarisiq'){\r\n if (q2==='leke') return 's4';\r\n return 's4';\r\n }\r\n if (q1==='normal'){\r\n if (q2==='qirisiq' && (q3==='46+' || q3==='36-45')) return 's6';\r\n if (q2==='qirisiq') return 's3';\r\n if (q2==='leke') return 's4';\r\n return 's5';\r\n }\r\n return 's5';\r\n }\r\n\r\n \/\/ ---------- RENDER ----------\r\n function show(stepName){\r\n document.querySelectorAll('.dsvl-step').forEach(s=>s.classList.remove('active'));\r\n document.querySelector(`[data-step=\"${stepName}\"]`).classList.add('active');\r\n const idx = flow.indexOf(stepName);\r\n state.stepIndex = idx;\r\n\r\n \/\/ Progress bar (visible during questions)\r\n const showProgress = idx>=1 && idx<=5;\r\n document.getElementById('dsvlProgress').style.display = showProgress?'flex':'none';\r\n document.getElementById('dsvlNav').style.display = (idx>=1 && idx<=5)?'flex':'none';\r\n\r\n if(showProgress){\r\n const fill = (idx-0)\/5;\r\n document.getElementById('dsvlProgressFill').style.transform = `scaleX(${fill})`;\r\n document.getElementById('dsvlProgressText').textContent = `${idx} \/ 5`;\r\n }\r\n\r\n \/\/ Update next button state\r\n if(idx>=1 && idx<=5){\r\n const qKey = 'q'+idx;\r\n const enabled = !!state[qKey];\r\n const btn = document.getElementById('dsvlNext');\r\n btn.disabled = !enabled;\r\n btn.textContent = idx===5 ? 'Rutinimi g\u00f6st\u0259r \u2192' : 'N\u00f6vb\u0259ti \u2192';\r\n }\r\n\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n }\r\n\r\n function renderResult(){\r\n const s = SCENARIOS[pickScenario()];\r\n const wantsMorning = state.time==='morning' || state.time==='both';\r\n const wantsEvening = state.time==='evening' || state.time==='both';\r\n const showMorning = wantsMorning && s.morning.length;\r\n const showEvening = wantsEvening && s.evening.length;\r\n\r\n let html = `\r\n <div class=\"dsvl-result-head\">\r\n <div class=\"dsvl-result-tag ${s.tagClass}\">${s.tag}<\/div>\r\n <h2 class=\"dsvl-result-title\">${s.title}<\/h2>\r\n <p class=\"dsvl-result-desc\">${s.desc}<\/p>\r\n <\/div>\r\n `;\r\n\r\n if(showMorning){\r\n html += renderRoutineSection(\r\n s.morningLabel || 'S\u0259h\u0259r rutini',\r\n 'i.',\r\n s.morning,\r\n s.morning.length + ' add\u0131m'\r\n );\r\n }\r\n\r\n if(showEvening){\r\n html += renderRoutineSection(\r\n s.eveningLabel || 'Gec\u0259 rutini',\r\n 'ii.',\r\n s.evening,\r\n s.evening.length + ' add\u0131m'\r\n );\r\n }\r\n\r\n \/\/ Alt block\r\n if(s.altText){\r\n html += `\r\n <div class=\"dsvl-alt-block\">\r\n <div class=\"dsvl-alt-head\">${s.altTitle}<\/div>\r\n <div class=\"dsvl-alt-text\">${s.altText}<\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Important notes\r\n html += `\r\n <div class=\"dsvl-notes warn\">\r\n <div class=\"dsvl-notes-h\">Diqq\u0259t \u2014 tur\u015fulu m\u0259hsullar<\/div>\r\n <div class=\"dsvl-notes-text\">Retinol, saf C vitamini, Deep Peeling Serum v\u0259 SOS h\u0259ft\u0259d\u0259 2 g\u00fcn il\u0259 ba\u015flan\u0131r, d\u0259ri \u00f6yr\u0259\u015finc\u0259 3-4 g\u00fcn\u0259 qald\u0131r\u0131l\u0131r. H\u0259ssas d\u0259ri \u00fc\u00e7\u00fcn ilk istifad\u0259d\u0259n \u0259vv\u0259l test et. S\u0259h\u0259r rutinind\u0259 SPF m\u0259cburidir.<\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ Clinic CTA (s9)\r\n if(s.clinic){\r\n html += `\r\n <div class=\"dsvl-notes cta\">\r\n <div class=\"dsvl-notes-h\">Daha s\u00fcr\u0259tli n\u0259tic\u0259 \u00fc\u00e7\u00fcn<\/div>\r\n <div class=\"dsvl-notes-text\">\u00c7atlaq protokolumuz m\u00f6vcuddur. Klinikaya y\u00f6nl\u0259ndirm\u0259 \u00fc\u00e7\u00fcn biziml\u0259 \u0259laq\u0259 saxla \u2014 Ozon Ya\u011f\u0131 i\u015fleml\u0259 birlikd\u0259 daha s\u00fcr\u0259tli n\u0259tic\u0259 verir.<\/div>\r\n <a href=\"#\" class=\"dsvl-step-btn primary\" style=\"display:inline-block;margin-top:14px;text-decoration:none;\">Klinikaya m\u00fcraci\u0259t et<\/a>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Bundle CTA\r\n if(s.bundle){\r\n html += `\r\n <div class=\"dsvl-bundle\">\r\n <div>\r\n <div class=\"dsvl-bundle-h\">${s.bundle.name}<\/div>\r\n <div class=\"dsvl-bundle-p\">Tam d\u0259st\u0259 endirimli qiym\u0259t\u0259<\/div>\r\n <\/div>\r\n <a href=\"${s.bundle.url}\" target=\"_blank\" class=\"dsvl-bundle-btn\">D\u0259st\u0259 bax \u2192<\/a>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ Footer actions\r\n html += `\r\n <div class=\"dsvl-footer-actions\">\r\n <button onclick=\"window.dsvlReset()\">Yenid\u0259n ba\u015fla<\/button>\r\n <button onclick=\"window.print()\">Rutini \u00e7ap et<\/button>\r\n <\/div>\r\n `;\r\n\r\n document.getElementById('dsvlResult').innerHTML = html;\r\n }\r\n\r\n function renderRoutineSection(title, icon, productIds, meta){\r\n let items = productIds.map((id,i)=>{\r\n const p = P[id];\r\n if(!p) return '';\r\n return `\r\n <li class=\"dsvl-step-item\">\r\n <div class=\"dsvl-step-num\">${String(i+1).padStart(2,'0')}<\/div>\r\n <div class=\"dsvl-step-img-wrap\"><img decoding=\"async\" class=\"dsvl-step-img\" src=\"${p.img}\" alt=\"${p.name}\" loading=\"lazy\"><\/div>\r\n <div class=\"dsvl-step-info\">\r\n <div class=\"dsvl-step-cat\">${p.cat}<\/div>\r\n <div class=\"dsvl-step-name\">${p.name}<\/div>\r\n <\/div>\r\n <div class=\"dsvl-step-actions\">\r\n <a href=\"${p.url}\" target=\"_blank\" class=\"dsvl-step-btn primary\">S\u0259b\u0259t\u0259 \u0259lav\u0259 et<\/a>\r\n <\/div>\r\n <\/li>\r\n `;\r\n }).join('');\r\n\r\n return `\r\n <div class=\"dsvl-routine-section\">\r\n <div class=\"dsvl-routine-head\">\r\n <span class=\"dsvl-routine-icon\">${icon}<\/span>\r\n <h3 class=\"dsvl-routine-h\">${title}<\/h3>\r\n <span class=\"dsvl-routine-meta\">${meta}<\/span>\r\n <\/div>\r\n <ul class=\"dsvl-steps-list\">${items}<\/ul>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ---------- EVENTS ----------\r\n \/\/ Welcome cards\r\n document.querySelectorAll('[data-time]').forEach(b=>{\r\n b.addEventListener('click',()=>{\r\n state.time = b.dataset.time;\r\n show('q1');\r\n });\r\n });\r\n\r\n \/\/ Question option click\r\n document.querySelectorAll('[data-q]').forEach(group=>{\r\n const q = group.dataset.q;\r\n group.querySelectorAll('.dsvl-option').forEach(opt=>{\r\n opt.addEventListener('click',()=>{\r\n group.querySelectorAll('.dsvl-option').forEach(o=>o.classList.remove('selected'));\r\n opt.classList.add('selected');\r\n state[q] = opt.dataset.val;\r\n document.getElementById('dsvlNext').disabled = false;\r\n });\r\n });\r\n });\r\n\r\n \/\/ Nav\r\n document.getElementById('dsvlNext').addEventListener('click',()=>{\r\n const idx = state.stepIndex;\r\n if(idx<5){\r\n show(flow[idx+1]);\r\n } else if(idx===5){\r\n renderResult();\r\n show('result');\r\n }\r\n });\r\n document.getElementById('dsvlBack').addEventListener('click',()=>{\r\n const idx = state.stepIndex;\r\n if(idx>0) show(flow[idx-1]);\r\n });\r\n\r\n \/\/ Reset\r\n window.dsvlReset = function(){\r\n Object.assign(state,{time:'both',q1:null,q2:null,q3:null,q4:null,q5:null,stepIndex:0});\r\n document.querySelectorAll('.dsvl-option.selected').forEach(o=>o.classList.remove('selected'));\r\n show('welcome');\r\n };\r\n\r\n \/\/ Init\r\n show('welcome');\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Rutinini Yarat \u2014 DS V-LINE 1 \/ 5 DS V-Line \u00b7 \u015e\u0259xsi Bax\u0131m Rutinini yarat 5 sual cavabland\u0131r, d\u0259rin\u0259 uy\u011fun s\u0259h\u0259r v\u0259 gec\u0259 rutinini al. H\u0259r add\u0131m s\u0259nin d\u0259ri tipin v\u0259 problemin \u00fc\u00e7\u00fcn haz\u0131rlan\u0131r. i. S\u0259h\u0259r rutini G\u00fcn\u0259 t\u0259miz ba\u015fla ii. Gec\u0259 rutini Yuxudan \u0259vv\u0259l b\u0259rpa iii. H\u0259r ikisi Tam g\u00fcnl\u00fck bax\u0131m Sual 01 D\u0259ri…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bst_post_transparent":"","_bst_post_title":"hide","_bst_post_layout":"fullwidth","_bst_post_sidebar_id":"","_bst_post_content_style":"unboxed","_bst_post_vertical_padding":"hide","_bst_post_feature":"hide","_bst_post_feature_position":"","_bst_post_header":false,"_bst_post_footer":false,"footnotes":""},"class_list":["post-2695","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/comments?post=2695"}],"version-history":[{"count":4,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695\/revisions"}],"predecessor-version":[{"id":2703,"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/pages\/2695\/revisions\/2703"}],"wp:attachment":[{"href":"https:\/\/az.dsvline.com\/ru\/wp-json\/wp\/v2\/media?parent=2695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}