/* ============================================================== kayit.css BÖLÜM A · ORTAK (legacy) kayit.php ve google_kayit_tamamla.php birlikte kullanır. js/kayit.js sözleşmesi: .field / .has-error / .shake / #phone-input-wrapper / autofill animasyonu. BÖLÜM B · .ky (kayit.php v2 — tam genişlik, ortalanmış tek sütun) ██ TASARIM DİLİ: “BERRAK” (Berrak Design Language) Tam tanım ve 8 kural: css/profilim.css dosya başı. Aynı dili kullananlar: giris.php (.gr-*), profilim.php (.pr-*). WCAG 2.1/2.2 AAA katmanı. Kontrast oranları beyaz (#fff) zemine göre ölçüldü. #0f172a 17.9:1 · #334155 10.4:1 · #475569 7.58:1 · #1e40af 8.83:1 #1e3a8a 10.5:1 · #991b1b 8.32:1 · #065f46 7.75:1 #64748b 4.76:1 (YALNIZ kenar/ikon — metin DEĞİL) ============================================================== */ /* ══════════════════════════════════════════════════════════════ BÖLÜM A · ORTAK ══════════════════════════════════════════════════════════════ */ /* Form alanı kapsayıcısı (JS `closest('.field')` ile bulur) */ .field { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; cursor: text; } .field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); background: #fff; } .field.has-error { border-color: #f87171; background: #fef2f2; } .shadow-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(37, 99, 235, .12); } .shadow-btn { box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px -4px rgba(37, 99, 235, .35); } .shadow-field { box-shadow: 0 1px 0 rgba(15, 23, 42, .03) inset; } /* Hata titreşimi (JS .shake ekler/çıkarır) */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } } .shake { animation: shake .35s ease-in-out; } .pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .pt-safe { padding-top: max(1rem, env(safe-area-inset-top)); } /* intl-tel-input v24 — .field içindeki çift kenarlığı kaldır */ #phone-input-wrapper .iti { width: 100%; } #phone-input-wrapper .iti.iti--allow-dropdown.iti--separate-dial-code { border: none !important; border-radius: inherit !important; min-height: auto !important; background: transparent !important; } #phone-input-wrapper .iti.iti--allow-dropdown.iti--separate-dial-code:focus-within { border: none !important; box-shadow: none !important; /* halkayı .field:focus-within verir */ } #phone-input-wrapper .iti__selected-country { border-radius: 12px 0 0 12px !important; border-right: 1px solid #e2e8f0 !important; background: rgba(255,255,255,0.5); padding: 0 10px; flex-shrink: 0 !important; /* bayrak+kod sabit, input esnek */ } #phone-input-wrapper .iti__tel-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* padding-left: kayit.js ResizeObserver ile dinamik ayarlar */ } /* Ülke listesi — dokunma hedefi, klavye odağı ve AAA kontrast. .ky ile KAPSAMLANMAZ: liste tam ekran modda 'ye taşınıyor. head_etiketleri.php'deki genel ITI stilleri burada AAA'ya çekilir. */ .iti__country { min-height: 44px; } /* ⚠ YÜKLEME SIRASI: intlTelInput CDN CSS'i ve head_etiketleri.php'nin ITI