/* ══════════════════════════════════════════════════════════════════════ VALIDATE-POP — native form doğrulama baloncuğunun yerine tema uyumlu uyarı balonu ---------------------------------------------------------------------- NEDEN: Chromium "Please fill out this field" baloncuğunu sayfanın DIŞINDA, işletim sistemi katmanında çizer. Sayfa CSS'i oraya ulaşamaz: metin İngilizce, zemin tema ile alakasız, yazı tipi bambaşka. validate-pop.js her

'a çalışma zamanında `novalidate` ekleyerek o baloncuğu kapatır ve yerine aşağıdaki balonu 'ye portal olarak basar. Balon altında position:fixed durur; böylece kartlardaki overflow:hidden / transform / backdrop-filter kırpmalarından etkilenmez (ipucu motorundaki .uk-tip ile aynı mantık). ══════════════════════════════════════════════════════════════════════ */ .vpop { position: fixed; left: 0; top: 0; z-index: 2147482900; /* .uk-tip (…3000) hemen altı */ box-sizing: border-box; display: flex; align-items: flex-start; gap: 7px; max-width: 280px; padding: 8px 11px; margin: 0; border-radius: 10px; /* OPAK zemin şart: yarı saydam olsaydı balon, altındaki kartın kenarlığı/metni üzerine binip okunmaz hâle gelirdi. */ background: #3a1420; border: 1px solid rgba(248,113,113,0.48); box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30); color: #ffd9dd; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; text-align: left; /* .uk-tip ile aynı: balon tıklamayı YUTMAZ. Birden çok alan aynı anda geçersizse balonlar alttaki alanın üstüne binebiliyor; pointer-events açık olsaydı o alan tıklanamaz hâle gelirdi. */ pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; } .vpop.visible { opacity: 1; transform: none; } /* Üste yerleşince açılış yönü de tersine dönsün */ .vpop.above { transform: translateY(4px); } .vpop.above.visible { transform: none; } /* Ok — yatay konumu JS'ten (--vpop-arrow) gelir; balon ekran kenarına sıkışsa bile ok alanın ortasını göstermeye devam eder. */ .vpop::before, .vpop::after { content: ''; position: absolute; left: var(--vpop-arrow, 18px); width: 0; height: 0; border: 6px solid transparent; pointer-events: none; } .vpop::before { /* kenarlık katmanı */ bottom: 100%; margin-left: -6px; border-bottom-color: rgba(248,113,113,0.48); } .vpop::after { /* zemin katmanı — 1px içeride */ bottom: calc(100% - 1px); margin-left: -6px; border-bottom-color: #3a1420; } .vpop.above::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: rgba(248,113,113,0.48); } .vpop.above::after { bottom: auto; top: calc(100% - 1px); border-bottom-color: transparent; border-top-color: #3a1420; } .vpop-icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; background: rgba(248,113,113,0.92); color: #2b0d15; font-size: 11px; font-weight: 900; line-height: 15px; text-align: center; } .vpop-text { min-width: 0; word-break: break-word; } /* ── Geçersiz alan vurgusu ───────────────────────────────────────────── Sayfa CSS'lerinde alanlar için `!important` taşıyan global kurallar var (.uk-input, .dash-input, .form-control …); vurgunun kesin görünmesi için burada da `!important` kullanılıyor. */ .vpop-invalid, .vpop-invalid:focus, .vpop-invalid:hover { border-color: rgba(248,113,113,0.90) !important; box-shadow: 0 0 0 3px rgba(248,113,113,0.20) !important; outline: none !important; } /* Kenarlığı olmayan alanlarda (border:none) vurgu görünmez kalmasın */ .vpop-invalid { border-style: solid !important; } /* Onay kutusu / radyo düğmesi: kenarlık yerine halka */ input.vpop-invalid[type="checkbox"], input.vpop-invalid[type="radio"] { outline: 2px solid rgba(248,113,113,0.90) !important; outline-offset: 2px !important; } /* ── AÇIK TEMA ───────────────────────────────────────────────────────── Sınıf 'de olduğu için balon altında kaldığı sürece `body.light-theme .vpop` eşleşir. */ body.light-theme .vpop { background: #fff1f2; border-color: rgba(190,18,60,0.34); box-shadow: 0 12px 30px rgba(30,27,51,0.16), 0 2px 8px rgba(30,27,51,0.10); color: #9f1239; } body.light-theme .vpop::before { border-bottom-color: rgba(190,18,60,0.34); } body.light-theme .vpop::after { border-bottom-color: #fff1f2; } body.light-theme .vpop.above::before { border-bottom-color: transparent; border-top-color: rgba(190,18,60,0.34); } body.light-theme .vpop.above::after { border-bottom-color: transparent; border-top-color: #fff1f2; } body.light-theme .vpop-icon { background: #dc2626; color: #fff; } body.light-theme .vpop-invalid, body.light-theme .vpop-invalid:focus, body.light-theme .vpop-invalid:hover { border-color: rgba(220,38,38,0.80) !important; box-shadow: 0 0 0 3px rgba(220,38,38,0.14) !important; } body.light-theme input.vpop-invalid[type="checkbox"], body.light-theme input.vpop-invalid[type="radio"] { outline-color: rgba(220,38,38,0.85) !important; } @media (prefers-reduced-motion: reduce) { .vpop, .vpop.above { transition: none; transform: none; } }