/* ══════════════════════════════════════════════════════════════════ TEKLİF AL — MODAL FORM (Views/Shared/_TeklifModal.cshtml) ------------------------------------------------------------------ Tasarım dili İletişim formuyla (iletisim.css) aynıdır: yumuşak köşeler, hairline kenar, marka gradyanı #0d6efd → #0dcaf0. TEMA: public taraf açık/koyu anahtarlıdır (). Renkler .teklif-modal üzerindeki token'lardan okunur; koyu tema override'ı aşağıdadır. Bootstrap 5.3 kendi bileşenlerini (modal, form-control, btn-close) data-bs-theme ile zaten çeviriyor — buradaki kurallar onun ÜSTÜNE ince ayar yapar. MOBİL: dialog'da modal-fullscreen-sm-down var → dar ekranda tam ekran açılır; köşe yuvarlaklığı orada sıfırlanır. ══════════════════════════════════════════════════════════════════ */ .teklif-modal { --tkl-yuzey: #ffffff; --tkl-yuzey-2: #f6f8fc; --tkl-kenar: rgba(15, 23, 42, .10); --tkl-metin: #0f172a; --tkl-soluk: #64748b; --tkl-birincil: #0d6efd; --tkl-cyan: #0dcaf0; --tkl-hata: #dc2626; --tkl-basari: #16a34a; --tkl-golge: 0 30px 70px -30px rgba(2, 6, 23, .45); } [data-bs-theme="dark"] .teklif-modal { --tkl-yuzey: #101a2e; --tkl-yuzey-2: #0d1726; --tkl-kenar: rgba(148, 163, 184, .16); --tkl-metin: #e2e8f0; --tkl-soluk: #94a3b8; --tkl-hata: #f87171; --tkl-basari: #4ade80; --tkl-golge: 0 30px 70px -30px rgba(0, 0, 0, .75); } /* JS gizleme/gösterme için hidden özniteliğini kullanır (form ⇄ başarı ekranı, "Diğer" alanı, hata kutusu). Bootstrap reboot'ta zaten var; sayfa hangi sırayla yüklenirse yüklensin çalışsın diye burada da güvenceye alınır. */ .teklif-modal [hidden] { display: none !important; } /* ──────────────────────────────────────────── KAP ──────────────────────────────────────────── */ .teklif-modal .tkl-kart { position: relative; border: 1px solid var(--tkl-kenar); border-radius: 22px; background: var(--tkl-yuzey); color: var(--tkl-metin); box-shadow: var(--tkl-golge); overflow: hidden; } /* Marka çizgisi — form bloğunun tepesindeki şeridin (iletisim.css) karşılığı */ .teklif-modal .tkl-serit { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0d6efd, #0dcaf0, #7dd3fc); z-index: 2; } .teklif-modal .tkl-ust { align-items: flex-start; gap: 1rem; padding: 1.5rem 1.5rem 1.15rem; border-bottom: 1px solid var(--tkl-kenar); background: var(--tkl-yuzey-2); } .teklif-modal .tkl-etiket { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem 1rem; border-radius: 999px; background: color-mix(in srgb, var(--tkl-birincil) 10%, transparent); border: 1px solid color-mix(in srgb, var(--tkl-birincil) 25%, transparent); color: var(--tkl-birincil); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .teklif-modal .tkl-baslik { margin: .65rem 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--tkl-metin); } .teklif-modal .tkl-govde { padding: 1.5rem; background: var(--tkl-yuzey); } .teklif-modal .tkl-giris { margin: 0 0 1.15rem; font-size: .92rem; line-height: 1.65; color: var(--tkl-soluk); } /* Modal içi hata kutusu (.tkl-uyari) 06.08.2026'da KALDIRILDI: alan dışı hatalar -reCAPTCHA reddi dahil- artık ortak bildirim modalında gösteriliyor (/tema/css/bildirim.css · CLAUDE.md §7). Alan mesajları .tkl-hata ile yerinde kalır. */ /* ──────────────────────────────────────────── FORM ALANLARI ──────────────────────────────────────────── */ .teklif-modal .form-label { margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--tkl-metin); } .teklif-modal .tkl-zorunlu { color: #ef4444; } .teklif-modal .form-control, .teklif-modal .form-select { padding: .78rem 1.05rem; border-radius: 14px; border: 1px solid var(--tkl-kenar); background-color: color-mix(in srgb, var(--tkl-metin) 3%, transparent); color: var(--tkl-metin); font-size: .95rem; transition: border-color .2s, box-shadow .2s, background-color .2s; } .teklif-modal .form-control::placeholder { color: color-mix(in srgb, var(--tkl-soluk) 75%, transparent); } .teklif-modal .form-control:focus, .teklif-modal .form-select:focus { background-color: var(--tkl-yuzey); border-color: var(--tkl-birincil); box-shadow: 0 0 0 4px rgba(13, 110, 253, .12); outline: 0; } .teklif-modal textarea.form-control { min-height: 118px; resize: vertical; } /* Sunucudan gelen alan hatası + tarayıcı doğrulaması aynı görünür */ .teklif-modal .form-control.is-invalid, .teklif-modal .form-select.is-invalid, .teklif-modal .tkl-form.was-validated .form-control:invalid, .teklif-modal .tkl-form.was-validated .form-select:invalid { border-color: var(--tkl-hata); box-shadow: none; } .teklif-modal .form-control.is-invalid:focus, .teklif-modal .form-select.is-invalid:focus, .teklif-modal .tkl-form.was-validated .form-control:invalid:focus, .teklif-modal .tkl-form.was-validated .form-select:invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tkl-hata) 18%, transparent); } /* Alan altı hata metni — boşken yer kaplamaz */ .teklif-modal .tkl-hata { display: block; margin-top: .3rem; color: var(--tkl-hata); font-size: .82rem; font-weight: 600; line-height: 1.45; } .teklif-modal .tkl-hata:empty { display: none; } /* KVKK onayı — iletisim.css'teki .il-kvkk ile aynı dil */ .teklif-modal .tkl-kvkk { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .88rem; line-height: 1.6; color: var(--tkl-soluk); } .teklif-modal .tkl-kvkk input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--tkl-birincil); flex: 0 0 auto; } .teklif-modal .tkl-kvkk a { color: var(--tkl-birincil); font-weight: 600; text-decoration: none; } .teklif-modal .tkl-kvkk a:hover { text-decoration: underline; } .teklif-modal .tkl-form.was-validated .tkl-kvkk input:invalid { outline: 2px solid var(--tkl-hata); outline-offset: 2px; } /* ──────────────────────────────────────────── DÜĞMELER ──────────────────────────────────────────── */ .teklif-modal .tkl-alt { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; margin-top: .25rem; } .teklif-modal .tkl-alt-not { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--tkl-soluk); } .teklif-modal .tkl-alt-not i { color: var(--tkl-basari); } .teklif-modal .tkl-gonder { display: inline-flex; align-items: center; gap: .65rem; padding: .85rem 2.2rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%); color: #fff; font-weight: 700; font-size: .98rem; box-shadow: 0 10px 26px rgba(13, 110, 253, .32); transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, opacity .2s; } .teklif-modal .tkl-gonder i { transition: transform .25s ease; } .teklif-modal .tkl-gonder:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(13, 110, 253, .45); color: #fff; } .teklif-modal .tkl-gonder:hover:not(:disabled) i { transform: translateX(4px); } .teklif-modal .tkl-gonder:disabled { opacity: .65; cursor: progress; transform: none; } .teklif-modal .tkl-ikincil { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.8rem; border: 1px solid var(--tkl-kenar); border-radius: 999px; background: transparent; color: var(--tkl-metin); font-weight: 600; font-size: .95rem; transition: border-color .2s, color .2s, background-color .2s; } .teklif-modal .tkl-ikincil:hover { border-color: var(--tkl-birincil); color: var(--tkl-birincil); background: color-mix(in srgb, var(--tkl-birincil) 8%, transparent); } /* Gönderim sırasında dönen halka (butonun içine JS ekler) */ .teklif-modal .tkl-donuyor { display: inline-block; width: 1rem; height: 1rem; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: tklDon .7s linear infinite; } @keyframes tklDon { to { transform: rotate(360deg); } } /* ──────────────────────────────────────────── BAŞARI EKRANI (form gizlenir, bu görünür) ──────────────────────────────────────────── */ .teklif-modal .tkl-basari { text-align: center; padding: 1.5rem .5rem .75rem; animation: tklBelir .45s ease both; } .teklif-modal .tkl-basari-ikon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--tkl-basari) 15%, transparent); border: 1px solid color-mix(in srgb, var(--tkl-basari) 40%, transparent); color: var(--tkl-basari); font-size: 2.3rem; } .teklif-modal .tkl-basari h3 { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 800; color: var(--tkl-metin); } .teklif-modal .tkl-basari p { max-width: 420px; margin: 0 auto 1.6rem; font-size: .95rem; line-height: 1.7; color: var(--tkl-soluk); } .teklif-modal .tkl-basari-aksiyon { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; } @keyframes tklBelir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ──────────────────────────────────────────── DUYARLILIK ──────────────────────────────────────────── */ @media (max-width: 575.98px) { .teklif-modal .tkl-kart { border-radius: 0; border: 0; } .teklif-modal .tkl-ust, .teklif-modal .tkl-govde { padding-left: 1.15rem; padding-right: 1.15rem; } .teklif-modal .tkl-baslik { font-size: 1.25rem; } .teklif-modal .tkl-alt { flex-direction: column; align-items: stretch; } .teklif-modal .tkl-gonder, .teklif-modal .tkl-ikincil { justify-content: center; width: 100%; } .teklif-modal .tkl-alt-not { justify-content: center; } .teklif-modal .tkl-basari-aksiyon { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .teklif-modal .tkl-gonder, .teklif-modal .tkl-ikincil, .teklif-modal .form-control, .teklif-modal .form-select { transition: none; } .teklif-modal .tkl-basari { animation: none; } .teklif-modal .tkl-donuyor { animation-duration: 2s; } }