/* ============================================================================= /satin-al — sipariş sihirbazı, v2 tasarım diline taşınmış hâli. ⚠️ MARKUP'A DOKUNULMADI. Sayfadaki sihirbazın JS'i ~40 id ve `.sa-card`, `.sa-choice`, `.sel`, `.active` gibi sınıflara bağlı; hepsi korunur, yalnızca görünüm değişir. Yeni sınıf eklemek yerine mevcut kancalar yeniden boyanır. Yüklenme sırası (satin-al.html ): bootstrap.min.css → yalnız ızgara (row/col-*) iskeleti için assets/v2/theme.css → tokenlar + header/footer assets/v2/motion.css BU DOSYA → en sonda; Bootstrap'in açık tema varsayılanlarını ezer ========================================================================== */ /* Eski styles.css'ten gelen `.section` yardımcı sınıfı */ .section { padding: clamp(40px, 6vw, 76px) 0; } .container { width: min(100% - 40px, 1240px); margin-inline: auto; } /* ================================================================ HERO */ .sa-hero { position: relative; padding: clamp(48px, 7vw, 82px) 0 clamp(24px, 3vw, 34px); text-align: center; } .sa-hero h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--vd2-ink); } .sa-hero p { margin: 14px auto 0; max-width: 58ch; color: var(--vd2-ink-soft); font-size: clamp(1rem, 1.2vw, 1.1rem); } /* Adım göstergesi */ .sa-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; } .sa-step { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--vd2-line); background: var(--vd2-surface); font-size: 0.84rem; font-weight: 650; color: var(--vd2-muted); transition: color 240ms ease, border-color 240ms ease, background 240ms ease; } .sa-step .n { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--vd2-glass-2); color: var(--vd2-muted); font-size: 0.74rem; font-weight: 800; } .sa-step.active { color: var(--vd2-ink); border-color: rgba(124, 77, 255, 0.45); background: rgba(124, 77, 255, 0.10); } .sa-step.active .n { background: var(--vd2-grad); color: #fff; } .sa-step.done .n { background: #dcfce7; color: #15803d; } /* ============================================================== PANEL */ .sa-panel { max-width: 1000px; margin: 0 auto 90px; } /* --------------------------------------------------------- paket kartları */ /* Ana sayfadaki fiyat kartlarıyla aynı dil: koyu zeminde BEYAZ kart. */ .sa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .sa-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border: 2px solid var(--vd2-line); border-radius: var(--vd2-r-lg); background: #fff; color: #16233f; cursor: pointer; box-shadow: 0 20px 46px -28px rgba(15, 28, 54, 0.4); transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms ease, border-color 200ms ease; } .sa-card:hover { transform: translateY(-4px); } .sa-card.sel { border-color: var(--vd2-violet); box-shadow: 0 22px 50px -22px rgba(124, 77, 255, 0.5); } .sa-card .tick { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #dfe5f2; display: grid; place-items: center; color: transparent; font-size: 13px; transition: background 200ms ease, border-color 200ms ease, color 200ms ease; } .sa-card.sel .tick { background: var(--vd2-violet); border-color: var(--vd2-violet); color: #fff; } .sa-card h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: #0f1c36; } .sa-card .tg { font-size: 0.78rem; color: #6b7a99; margin: 3px 0 14px; } .sa-card .pr { font-size: 1.7rem; font-weight: 900; letter-spacing: -0.035em; color: #0f1c36; font-variant-numeric: tabular-nums; } .sa-card .pr small { font-size: 0.75rem; font-weight: 600; color: #7a89a9; } /* Kurulum+aylık modelinde fiyatın altındaki koşul satırı (priceHtml üretir). Eski yıllık paketlerde hiç basılmaz. */ .sa-card .prsub { margin: -6px 0 12px; font-size: 0.82rem; font-weight: 650; line-height: 1.45; color: var(--vd2-blue-hi, #1d4fd0); } .sa-card ul { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px solid #eaeff8; display: grid; gap: 9px; font-size: 0.85rem; color: #3c4a67; } .sa-card ul li { display: flex; gap: 8px; align-items: flex-start; } .sa-card ul svg { width: 14px; height: 14px; color: #2f6ef0; flex: none; margin-top: 3px; } /* --------------------------------------------------------------- formlar */ .sa-form, .sa-summary, .sa-done { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: var(--vd2-r-lg); border: 1px solid var(--vd2-line); background: var(--vd2-surface); box-shadow: var(--vd2-shadow); } .sa-bsec { display: grid; gap: 14px; padding: 20px; border-radius: var(--vd2-r); border: 1px solid var(--vd2-line); background: var(--vd2-surface-2); } .sa-bsec h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--vd2-ink); } /* Bootstrap form bileşenlerini v2 diline çevir */ .form-label { display: block; font-size: 0.87rem; font-weight: 650; color: var(--vd2-ink-soft); margin: 0; } .form-control, .form-select { margin-top: 7px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vd2-line-strong); background: var(--vd2-surface); color: var(--vd2-ink); font: inherit; font-size: 0.95rem; } .form-control::placeholder { color: #6f7c99; } .form-control:focus, .form-select:focus { outline: none; border-color: var(--vd2-blue); background: #fff; box-shadow: 0 0 0 3px rgba(47, 110, 240, 0.18); color: var(--vd2-ink); } textarea.form-control { resize: vertical; min-height: 74px; } /* Alan adı tercihi — seçilebilir kartlar */ .sa-choices { margin: 0; } .sa-choice { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: var(--vd2-r); border: 1px solid var(--vd2-line); background: var(--vd2-surface); cursor: pointer; transition: border-color 200ms ease, background 200ms ease; } .sa-choice:hover { border-color: var(--vd2-line-strong); } .sa-choice.sel { border-color: var(--vd2-violet); background: rgba(124, 77, 255, 0.09); } .sa-choice input { display: none; } .sa-choice b { font-size: 0.97rem; font-weight: 700; color: var(--vd2-ink); } .sa-choice span { font-size: 0.85rem; color: var(--vd2-muted); } .sa-later { display: flex; align-items: flex-start; gap: 10px; font-size: 0.87rem; color: var(--vd2-ink-soft); cursor: pointer; } .sa-later input { margin-top: 3px; accent-color: var(--vd2-violet); } .sa-radios { display: flex; gap: 22px; flex-wrap: wrap; } .sa-radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--vd2-ink-soft); cursor: pointer; } .sa-radios input { accent-color: var(--vd2-violet); } .sa-hint { display: block; margin-top: 7px; font-size: 0.8rem; color: var(--vd2-muted); } .sa-err { display: block; font-size: 0.87rem; font-weight: 600; color: #e11d48; } .sa-err:empty { display: none; } /* DNS kontrol sonucu */ .sa-status { padding: 12px 15px; border-radius: 12px; font-size: 0.87rem; font-weight: 600; border: 1px solid var(--vd2-line); background: var(--vd2-surface-2); color: var(--vd2-ink-soft); } .sa-status.ok { border-color: rgba(22, 163, 74, 0.35); background: #eafaf0; color: #15803d; } .sa-status.warn { border-color: rgba(202, 138, 4, 0.35); background: #fef8e7; color: #a16207; } .sa-status.bad { border-color: rgba(225, 29, 72, 0.32); background: #fdecef; color: #be123c; } /* Bal küpü — görünmez, klavye sırasında da yok */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ------------------------------------------------------------------ özet */ .sa-summary .r { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--vd2-line); font-size: 0.93rem; color: var(--vd2-muted); } .sa-summary .r b { color: var(--vd2-ink); font-weight: 700; text-align: right; } .sa-summary .tot { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--vd2-line-strong); font-size: 1.05rem; font-weight: 800; color: var(--vd2-ink); } .sa-summary .tot span:last-child { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.03em; background: var(--vd2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------------ teşekkür */ .sa-done { text-align: center; justify-items: center; } .sa-done .big { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(140deg, #22c55e, #15803d); box-shadow: 0 16px 40px -14px rgba(34, 197, 94, 0.8); } .sa-done h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; color: var(--vd2-ink); } .sa-done p { color: var(--vd2-ink-soft); } .sa-ref { display: inline-block; padding: 3px 11px; border-radius: 8px; background: rgba(124, 77, 255, 0.10); border: 1px solid rgba(124, 77, 255, 0.32); color: var(--vd2-violet-hi); font-weight: 800; font-family: ui-monospace, Menlo, monospace; } .sa-bank { display: grid; gap: 7px; width: 100%; max-width: 460px; margin-top: 8px; padding: 20px; border-radius: var(--vd2-r); border: 1px solid var(--vd2-line-strong); background: var(--vd2-surface-2); text-align: left; font-size: 0.92rem; color: var(--vd2-ink-soft); } .sa-bank b { color: var(--vd2-ink); font-size: 0.97rem; margin-bottom: 3px; } .sa-resume { font-size: 0.87rem; color: var(--vd2-muted); text-align: center; } .sa-resume a { color: var(--vd2-blue-hi); } /* ------------------------------------------------------------- gezinme */ .sa-nav { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 22px; } /* Eski styles.css buton sınıflarını v2 görünümüne eşle (markup değişmesin diye) */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-weight: 650; font-size: 0.97rem; text-decoration: none; cursor: pointer; transition: transform 200ms cubic-bezier(.22,1,.36,1), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-gradient { background: var(--vd2-grad); color: #fff; box-shadow: 0 12px 30px -12px rgba(79, 141, 255, 0.9); } .btn-gradient:hover:not(:disabled) { box-shadow: 0 18px 42px -12px rgba(79, 141, 255, 1); transform: translateY(-1px); } .btn-white { background: var(--vd2-surface); border-color: var(--vd2-line-strong); color: var(--vd2-ink); box-shadow: var(--vd2-shadow-sm); } .btn-white:hover { background: var(--vd2-surface-2); border-color: var(--vd2-blue); } /* ============================================================== DUYARLI */ @media (max-width: 900px) { .sa-cards { grid-template-columns: 1fr; } .sa-nav { flex-direction: column-reverse; } .sa-nav .btn { width: 100%; justify-content: center; } } @media (max-width: 620px) { .container { width: calc(100% - 32px); } .sa-step { font-size: 0.78rem; padding: 7px 12px; } }