:root { /* Renk paleti — [data-theme='ikys'] */ --c-bg: #f1f4f9; --c-surface: #ffffff; --c-surface-2: #eef2f8; --c-surface-muted: #f6f8fc; --c-border: #dbe2ec; --c-border-subtle: #e7ecf4; --c-border-strong: #9fadc4; --c-ink: #131c2e; --c-ink-soft: #5b6a85; --c-ink-dim: #9aa6bb; --c-on-brand: #ffffff; /* Marka rengi — TEK KAYNAK (single source of truth): RGB kanalları. Space-separated triplet'ler; tüm brand alias'ları aşağıdaki ":root, .theme-orange" bloğunda bu kanallardan türer ve rgb()/rgba() kullanımları da aynı kanalı paylaşır. Temayı değiştirmek için yalnızca bu altı kanalı ezmek yeterli (bkz. .theme-orange). */ --c-brand-rgb: 30 58 107; /* #1e3a6b — 500 / ana */ --c-brand-strong-rgb: 22 41 77; /* #16294d — 600 */ --c-brand-bright-rgb: 47 85 148; /* #2f5594 — 400 */ --c-brand-700-rgb: 15 29 56; /* #0f1d38 — 700 */ --c-brand-200-rgb: 182 199 230; /* #b6c7e6 — 200 */ --c-brand-soft-rgb: 234 240 250; /* #eaf0fa — 50 / soft */ --c-brand-ink: #ffffff; --c-danger: #dc2626; --c-danger-soft: #fef2f2; --c-success: #16a34a; --c-success-soft: #f0fdf4; --c-info: #2563eb; /* Yarıçaplar */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.25rem; /* Gölgeler */ --shadow-sm: 0 1px 2px rgb(33 37 41 / 0.04), 0 1px 3px rgb(33 37 41 / 0.06); --shadow-lg: 0 16px 40px rgb(33 37 41 / 0.1); --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; } /* ================================================================= Marka token alias'ları + tema ----------------------------------------------------------------- Alias'lar ORTAK seçicide tanımlı. Sebep: inherited custom property değerleri üst kapsamda yalnızca bir kez substitute edilir; bu yüzden bir alias'ın tema kapsamında yeniden çözülmesi için o kapsamda da bildirilmesi gerekir. Böylece .theme-orange yalnızca altı RGB kanalını ezdiğinde aşağıdaki tüm alias'lar otomatik olarak yeni renge döner. ================================================================= */ :root, .theme-orange { --c-brand: rgb(var(--c-brand-rgb)); --c-brand-strong: rgb(var(--c-brand-strong-rgb)); --c-brand-bright: rgb(var(--c-brand-bright-rgb)); --c-brand-soft: rgb(var(--c-brand-soft-rgb)); --c-brand-50: rgb(var(--c-brand-soft-rgb)); --c-brand-200: rgb(var(--c-brand-200-rgb)); --c-brand-400: rgb(var(--c-brand-bright-rgb)); --c-brand-500: rgb(var(--c-brand-rgb)); --c-brand-600: rgb(var(--c-brand-strong-rgb)); --c-brand-700: rgb(var(--c-brand-700-rgb)); --c-border-brand: rgb(var(--c-brand-rgb)); --c-ring: rgb(var(--c-brand-bright-rgb)); } /* Kurumsal turuncu teması — yalnızca altı RGB kanalı ezilir; tüm alias'lar ve rgb()/rgba() kullanımları otomatik turuncuya döner. Ana kurumsal renk #e0873e (400 / bright). Kullanım: */ .theme-orange { --c-brand-rgb: 242 104 21; /* #f26815 — 500 / ANA · kurumsal turuncu */ --c-brand-bright-rgb: 255 125 68; /* #ff7d44 — 400 / parlak */ --c-brand-strong-rgb: 207 89 8; /* #cf5908 — 600 (ana'dan koyu) */ --c-brand-700-rgb: 173 74 5; /* #ad4a05 — 700 · derin turuncu, metin için okunur */ --c-brand-200-rgb: 255 208 182; /* #ffd0b6 — 200 / açık ton */ --c-brand-soft-rgb: 255 243 236; /* #fff3ec — 50 / soft */ } /* ---------- Sıfırlama ---------- */ *, *::before, *::after { box-sizing: border-box; } /* hidden niteliği her zaman gizlesin — .field__error/.otp-error gibi display:flex taşıyan elemanlarda UA'nın [hidden] kuralını ezmesini önler. */ [hidden] { display: none !important; } html { background-color: var(--c-bg); color: var(--c-ink); } body { margin: 0; min-height: 100dvh; background-color: var(--c-bg); color: var(--c-ink); font-family: var(--font-sans); letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, p, ul, figure { margin: 0; } ul { padding: 0; list-style: none; } button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background-color: var(--c-brand-soft); color: var(--c-brand-700); } /* ================================================================= Düzen (AuthLayout) ================================================================= */ .auth { display: grid; min-height: 100dvh; /* Mobilde tek kolon: minmax(0,1fr) ile kolon viewport'u aşamaz; uzun içerik (mobil şerit başlığı vb.) sayfayı yatayda taşırmaz. */ grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .auth { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } } /* ---------- Sol marka paneli (IkysBrandPanel) ---------- */ .brand-panel { position: relative; display: none; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 3.5rem 3rem 3rem; color: #fff; background-image: linear-gradient( 180deg, var(--c-brand-700) 0%, var(--c-brand) 55%, var(--c-brand-bright) 100% ); } @media (min-width: 1024px) { .brand-panel { display: flex; } } .brand-panel__top { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; } .brand-panel__logo { width: 7rem; height: 7rem; object-fit: contain; } .brand-panel__intro { display: flex; max-width: 24rem; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .brand-panel__rule { height: 3px; width: 2.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.6); } .brand-panel__title { font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; } .brand-panel__desc { font-size: 0.9375rem; line-height: 1.625; color: rgb(255 255 255 / 0.75); } .brand-panel__features { display: grid; width: 100%; max-width: 20rem; gap: 0.75rem; } .brand-panel__feature { display: flex; align-items: center; gap: 0.875rem; } .brand-panel__feature-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15); } .brand-panel__feature-label { font-size: 0.875rem; font-weight: 500; color: rgb(255 255 255 / 0.85); } .brand-panel__org { position: relative; z-index: 1; margin: 0 auto; height: 5rem; width: auto; } /* Arka plan derinlik katmanları — portal hero'sundaki reçeteyle aynı: noktalı doku + üst köşe ışık parlaması + soluk belediye mührü + halka + alt karartma. */ .brand-panel__dots, .brand-panel__bloom, .brand-panel__ring, .brand-panel__seal, .brand-panel__fade { position: absolute; pointer-events: none; } .brand-panel__dots { inset: 0; background-image: radial-gradient(rgb(255 255 255 / 0.16) 1.2px, transparent 1.2px); background-size: 22px 22px; } .brand-panel__bloom { inset: 0; background-image: radial-gradient(58% 48% at 26% 12%, rgb(255 255 255 / 0.16), transparent 62%); } .brand-panel__ring { top: 50%; right: 0; width: 34rem; height: 34rem; border-radius: 9999px; border: 1px solid rgb(255 255 255 / 0.1); transform: translate(30%, -50%); } .brand-panel__seal { top: 50%; right: 0; width: 25rem; height: auto; opacity: 0.07; transform: translate(30%, -50%); } .brand-panel__fade { inset-inline: 0; bottom: 0; height: 7rem; background-image: linear-gradient(to top, rgb(0 0 0 / 0.18), transparent); } /* ================================================================= Sağ taraf (form alanı) ================================================================= */ .auth-main { display: flex; min-height: 100dvh; flex-direction: column; /* Tüm alana yayılan, belirgin mavi tonlu zemin: tabanı brand-50 ışıltısı, üzerine iki güçlü köşe parlaması ve görünür noktalı doku. Cam kutular bu dokuyu bulanık biçimde geçirir; açık alanlarda noktalar net okunur. */ background-color: var(--c-brand-50); background-image: radial-gradient(rgb(var(--c-brand-rgb) / 0.14) 1.5px, transparent 1.5px), radial-gradient(90% 80% at 100% 0%, rgb(var(--c-brand-bright-rgb) / 0.2), transparent 60%), radial-gradient(85% 80% at 0% 100%, rgb(var(--c-brand-bright-rgb) / 0.16), transparent 62%), radial-gradient(120% 100% at 50% 45%, rgb(var(--c-brand-bright-rgb) / 0.07), transparent 70%); background-size: 20px 20px, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-attachment: fixed, fixed, fixed, fixed; } /* Mobil üst marka şeridi (brand-rail, yalnızca < lg) */ .mobile-rail { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; color: #fff; background-image: linear-gradient( 180deg, var(--c-brand-bright) 0%, var(--c-brand) 50%, var(--c-brand-strong) 75%, var(--c-brand-700) 100% ); } @media (min-width: 1024px) { .mobile-rail { display: none; } } .mobile-rail__logo { width: 2.25rem; height: 2.25rem; object-fit: contain; } .mobile-rail__name { min-width: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; } .auth-body { display: flex; flex: 1; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; } @media (min-width: 640px) { .auth-body { padding-left: 2.5rem; padding-right: 2.5rem; } } .auth-card { width: 100%; max-width: 600px; } /* ================================================================= Ekranlar (method / password / phone / forgot / phone-changed) ================================================================= */ .screen { display: none; gap: 1.5rem; /* minmax(0,1fr): 1fr'nin örtük min-content minimumu çok-çocuklu satırları (OTP gibi) taşırmasın diye track minimumu sıfırlanır. */ grid-template-columns: minmax(0, 1fr); } .screen.is-active { display: grid; animation: screen-in 0.3s var(--ease-out); } @keyframes screen-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } /* Tek kolonlu içerik grid'leri: minmax(0,1fr) ile kolon konteyneri aşamaz; uzun metinler (kart açıklaması, sonuç mesajı) dar ekranda sarmalanır, taşmaz. */ .screen-header, .method-list, .help-list, .stack, .field, .result__text, .result__actions { grid-template-columns: minmax(0, 1fr); } /* ---------- Başlık (Header) ---------- */ .screen-header { display: grid; gap: 0.375rem; } .screen-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--c-ink); } .screen-header p { font-size: 0.875rem; color: var(--c-ink-soft); } /* ---------- Üst gezinme (Nav) ---------- */ .nav { display: flex; align-items: center; justify-content: space-between; } .nav__back { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-ink-soft); box-shadow: 0 1px 2px rgb(18 23 38 / 0.06), inset 0 1px 0 0 rgb(255 255 255 / 0.6); transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .nav__back:hover { border-color: var(--c-border-brand); color: var(--c-ink); box-shadow: 0 3px 10px rgb(18 23 38 / 0.1), inset 0 1px 0 0 rgb(255 255 255 / 0.6); } .nav__switch { display: inline-flex; align-items: center; gap: 0.375rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--c-brand-700); transition: color 0.15s; } .nav__switch:hover { color: var(--c-brand); } /* ---------- Yöntem kartı (MethodCard) ---------- */ .method-list { display: grid; gap: 0.75rem; } .method-card { display: flex; width: 100%; align-items: center; gap: 1rem; padding: 1rem; text-align: left; border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--radius-lg); /* Cam efekti: yarı saydam beyaz + arka planı bulanıklaştıran backdrop-filter */ background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 4px 18px rgb(18 23 38 / 0.06), inset 0 1px 0 0 rgb(255 255 255 / 0.5); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .method-card:hover { border-color: var(--c-brand); background: rgb(255 255 255 / 0.72); box-shadow: 0 8px 24px rgb(18 23 38 / 0.1), inset 0 1px 0 0 rgb(255 255 255 / 0.6); } .method-card__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-lg); background: var(--c-brand-50); color: var(--c-brand); } .method-card__body { min-width: 0; flex: 1; } .method-card__title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--c-ink); } .method-card__desc { display: block; font-size: 0.875rem; color: var(--c-ink-soft); } .method-card__chev { flex-shrink: 0; color: var(--c-ink-dim); } /* ---------- Ayraç (Divider) ---------- */ .divider { display: flex; align-items: center; gap: 0.75rem; } .divider__line { height: 1px; flex: 1; background: var(--c-border); } .divider__label { font-size: 0.75rem; font-weight: 500; color: var(--c-ink-dim); } /* ---------- Yardım satırı (HelpRow) ---------- */ .help-list { display: grid; gap: 0.25rem; } .help-row { display: flex; width: 100%; align-items: center; gap: 0.75rem; padding: 0.75rem 0.5rem; text-align: left; border: none; border-radius: var(--radius-md); background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--c-ink-soft); transition: background-color 0.15s, color 0.15s; } .help-row:hover { background: var(--c-surface-2); color: var(--c-ink); } .help-row__icon { color: var(--c-ink-dim); } .help-row__label { flex: 1; } /* ---------- Giriş alanı (Input) ---------- */ .field { display: grid; gap: 0.5rem; } .field__label { font-size: 0.875rem; font-weight: 500; color: var(--c-ink); } .field__control { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.875rem; padding-right: 0.875rem; border: 1px solid var(--c-border); border-radius: var(--radius-md); /* Cam efekti — input net kalsın diye saydamlık biraz daha yüksek */ background: rgb(255 255 255 / 0.6); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.5); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .field__control:focus-within { border-color: var(--c-brand); background: rgb(255 255 255 / 0.8); box-shadow: 0 0 0 2px rgb(var(--c-brand-bright-rgb) / 0.25); } .field__prefix { display: flex; align-items: center; gap: 0.4rem; padding-right: 0.5rem; border-right: 1px solid var(--c-border); font-size: 0.875rem; font-weight: 500; color: var(--c-ink-soft); } .field__leading { display: inline-flex; color: var(--c-ink-dim); } .field__input { height: 3rem; min-width: 0; flex: 1; border: none; background: transparent; font-size: 0.875rem; color: var(--c-ink); } .field__input::placeholder { color: var(--c-ink-dim); } /* Gizli (maskeli) alanlar — '*' karakterleri okunaklı olsun diye hafif aralık */ .field__input[data-secret] { letter-spacing: 0.14em; } .field__input[data-secret]::placeholder { letter-spacing: normal; } /* Her yeni hane girişinde kısa, yumuşak bir "yazılıyor" nabzı */ @keyframes secret-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } } .field__input.is-typing { animation: secret-pop 0.18s ease-out; } @media (prefers-reduced-motion: reduce) { .field__input.is-typing { animation: none; } } .field__input:focus { outline: none; } .field__trailing { display: inline-flex; align-items: center; border: none; background: transparent; color: var(--c-ink-dim); transition: color 0.15s; } .field__trailing:hover { color: var(--c-ink); } /* ---------- Buton (Button) ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background-color 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s var(--ease-out); } .btn:active { transform: scale(0.98); } .btn--block { width: 100%; } .btn--primary { background-image: linear-gradient(90deg, var(--c-brand-bright) 0%, var(--c-brand) 100%); color: var(--c-brand-ink); /* Markanın kendi kanalından türeyen gölge — tema ile birlikte değişir */ box-shadow: 0 4px 10px rgb(var(--c-brand-rgb) / 0.3); } .btn--primary:hover { box-shadow: 0 8px 20px rgb(var(--c-brand-rgb) / 0.38); } /* Üstte ince ışık (inset highlight) */ .btn--primary .btn__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.18); } .btn--ghost { background: transparent; color: var(--c-brand-700); } .btn--ghost:hover { background: var(--c-brand-50); } /* ---------- Metin bağlantı butonu (forgot / phone-changed) ---------- */ .link-action { display: flex; align-items: center; justify-content: center; gap: 0.375rem; border: none; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--c-brand-700); transition: color 0.15s; } .link-action:hover { color: var(--c-brand); } .stack { display: grid; gap: 0.75rem; } /* ---------- İletişim kartı (ContactCard) ---------- */ .contact-card { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--radius-lg); /* Cam efekti */ background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 4px 18px rgb(18 23 38 / 0.06), inset 0 1px 0 0 rgb(255 255 255 / 0.5); } .contact-card__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); background: var(--c-brand-50); color: var(--c-brand); } .contact-card__body { min-width: 0; } .contact-card__title { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); } .contact-card__detail { font-size: 0.875rem; color: var(--c-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================= Alan hatası (validasyon) ================================================================= */ .field--error .field__control { border-color: var(--c-danger); background: rgb(255 255 255 / 0.7); } .field--error .field__control:focus-within { border-color: var(--c-danger); box-shadow: 0 0 0 2px rgb(220 38 38 / 0.22); } .field__error { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--c-danger); } /* ================================================================= "Beni hatırla" + satır içi yardımcı eylem satırı ================================================================= */ .form-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .remember { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--c-ink-soft); user-select: none; } .remember input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .remember__box { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border: 1.5px solid var(--c-border-strong); border-radius: 0.4rem; background: rgb(255 255 255 / 0.7); color: #fff; transition: background-color 0.15s, border-color 0.15s; } .remember__box svg { opacity: 0; transform: scale(0.6); transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out); } .remember input:checked + .remember__box { background: var(--c-brand); border-color: var(--c-brand); } .remember input:checked + .remember__box svg { opacity: 1; transform: scale(1); } .remember input:focus-visible + .remember__box { outline: none; box-shadow: 0 0 0 2px rgb(var(--c-brand-bright-rgb) / 0.3); } /* ================================================================= OTP — 6 haneli doğrulama kodu ================================================================= */ .otp { /* 6 eşit hücre — minmax(0,1fr) ile garanti eşit dağılım, taşma yok */ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; } .otp__cell { width: 100%; min-width: 0; height: 3.5rem; text-align: center; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-ink); border: 1px solid var(--c-border); border-radius: var(--radius-md); /* Cam efekti */ background: rgb(255 255 255 / 0.6); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.5); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .otp__cell:focus { outline: none; border-color: var(--c-brand); background: rgb(255 255 255 / 0.85); box-shadow: 0 0 0 2px rgb(var(--c-brand-bright-rgb) / 0.25); } .otp__cell[data-filled] { border-color: var(--c-brand-400); } .otp--error .otp__cell { border-color: var(--c-danger); } .otp-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .otp-error { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 500; color: var(--c-danger); } .otp-hint { font-size: 0.75rem; line-height: 1.5; color: var(--c-ink-dim); text-align: center; border-top: 1px dashed var(--c-border); padding-top: 0.875rem; } .otp-hint code { font-weight: 700; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; } /* ================================================================= Sonuç ekranı (başarı / hata) — dinamik ================================================================= */ .result { display: grid; justify-items: center; gap: 1.5rem; text-align: center; padding: 1.5rem 0 0.5rem; } .result__icon { display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 9999px; animation: result-pop 0.4s var(--ease-out); } .result__icon--success { background: var(--c-success-soft); color: var(--c-success); box-shadow: 0 0 0 6px rgb(22 163 74 / 0.08); } .result__icon--error { background: var(--c-danger-soft); color: var(--c-danger); box-shadow: 0 0 0 6px rgb(220 38 38 / 0.08); } @keyframes result-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } } .result__text { display: grid; gap: 0.5rem; max-width: 36ch; } .result__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--c-ink); } .result__message { font-size: 0.9375rem; line-height: 1.55; color: var(--c-ink-soft); } .result__actions { display: grid; gap: 0.75rem; width: 100%; margin-top: 0.25rem; } /* "Giriş yöntemlerine dön" — alt ekranlardaki dönüş bağlantısı (link-action ortalı) */ .link-action--center { margin-top: 0.25rem; } /* ================================================================= Ortak giriş (SSO / yetkilendirme · consent) ekranı Login'deki dille uyumlu: doku üstünde yüzen cam elemanlar, iç içe kart yok. Tek odaklı diyalog için kart genişliği daha dar. ================================================================= */ .consent { display: grid; gap: 1.25rem; max-width: 30rem; margin: 0 auto; } /* Bu sayfada dikey dolguyu kıs — içerik tek ekrana sığsın, sayfa kaymasın */ .auth-body--consent { padding-top: 1.5rem; padding-bottom: 1.5rem; } .consent-header { justify-items: center; text-align: center; } /* ---------- Bağlantı köprüsü (İKYS ↔ uygulama) ---------- */ .consent-bridge { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .consent-bridge__tile { display: grid; place-items: center; flex-shrink: 0; width: 5rem; height: 5rem; padding: 0.75rem; border: 1px solid rgb(255 255 255 / 0.7); border-radius: var(--radius-xl); /* Cam efekti — method-card reçetesiyle aynı */ background: rgb(255 255 255 / 0.55); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 4px 18px rgb(18 23 38 / 0.06), inset 0 1px 0 0 rgb(255 255 255 / 0.5); } .consent-bridge__tile img { width: 100%; height: 100%; object-fit: contain; } .consent-bridge__link { position: relative; display: grid; place-items: center; flex: 1; max-width: 5rem; height: 2.5rem; } /* Noktalı bağlantı çizgisi (marka renginde) */ .consent-bridge__link::before { content: ""; position: absolute; inset-inline: 0.25rem; top: 50%; height: 2px; transform: translateY(-50%); background-image: radial-gradient(circle, var(--c-brand) 1.5px, transparent 1.6px); background-size: 9px 2px; background-repeat: repeat-x; opacity: 0.45; } /* Ortadaki konektör rozeti */ .consent-bridge__badge { position: relative; z-index: 1; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-image: linear-gradient(135deg, var(--c-brand-bright), var(--c-brand)); color: var(--c-brand-ink); box-shadow: 0 4px 10px rgb(var(--c-brand-rgb) / 0.3), inset 0 1px 0 0 rgb(255 255 255 / 0.25); animation: consent-pulse 2.6s var(--ease-out) infinite; } @keyframes consent-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* Doğrulanmış uygulama rozeti — app kutusunun köşesinde */ .consent-bridge__tile--app { position: relative; } .consent-verified { position: absolute; right: -0.3125rem; bottom: -0.3125rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background-image: linear-gradient(135deg, var(--c-brand-bright), var(--c-brand)); color: var(--c-brand-ink); /* Yüzey renginde halka — rozeti kutudan/zeminden ayırır */ border: 2.5px solid var(--c-surface); box-shadow: 0 2px 6px rgb(var(--c-brand-rgb) / 0.35); } /* ---------- Akış durumu satırı (önceki auth adımına bağlanır) ---------- */ .consent-status { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--c-ink-soft); } /* Profil fotoğrafı + köşesinde "giriş yapıldı" onay rozeti */ .consent-status__avatar { position: relative; flex-shrink: 0; width: 1.875rem; height: 1.875rem; } .consent-status__avatar img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; background: var(--c-surface-2); box-shadow: 0 0 0 1px var(--c-border), inset 0 0 0 1.5px rgb(255 255 255 / 0.6); } .consent-status__avatar-badge { position: absolute; right: -0.125rem; bottom: -0.125rem; display: grid; place-items: center; width: 0.875rem; height: 0.875rem; border-radius: 9999px; background: var(--c-success); color: #fff; border: 1.5px solid var(--c-surface); } .consent-status__name { font-weight: 600; color: var(--c-ink); } .consent-status__sep { color: var(--c-ink-dim); } .consent-status__link { border: none; background: transparent; font-size: 0.8125rem; font-weight: 500; color: var(--c-brand-700); transition: color 0.15s; } .consent-status__link:hover { color: var(--c-brand); } /* ---------- Güven çipi (doğrulanmış uygulama) ---------- */ .trust-chip { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.5rem; padding: 0.3125rem 0.75rem; border: 1px solid var(--c-brand-200); border-radius: 9999px; background: var(--c-brand-soft); color: var(--c-brand-700); font-size: 0.75rem; font-weight: 600; letter-spacing: -0.005em; } .trust-chip .icon { color: var(--c-brand); } /* ---------- İzin (paylaşılacak bilgi) listesi ---------- */ .consent-perms { display: grid; gap: 0.625rem; } .consent-perms__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .consent-perms__title { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); } .consent-perms__note { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--c-ink-dim); } /* Kaydırma kabı — liste kendi içinde kayar; sayfa yüksekliği sabit kalır. Scrollbar gizli; "devamı var" ipucunu renge-doğru solan kenar + ortadaki hafifçe inip kalkan kaydır oku verir. Kenarlar akıllı: en üste/en alta gelince ilgili kenar kaybolur. */ .perm-box { position: relative; } .perm-scroll { overflow-y: auto; max-height: 9rem; /* Scrollbar gizli — kenar solması + ok yeterli ipucu */ scrollbar-width: none; } .perm-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Gerçek saydam solma: içerik MASK ile soluyor; arkadaki dokulu zemin görünür (renkli bant değil, bu yüzden solid durmaz). Kenarlar akıllı: yalnızca taşan yönde solma uygulanır. */ .perm-box.show-top .perm-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2rem); mask-image: linear-gradient(180deg, transparent 0, #000 2rem); } .perm-box.show-bottom .perm-scroll { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent 100%); } .perm-box.show-top.show-bottom .perm-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2rem, #000 calc(100% - 2.5rem), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 2rem, #000 calc(100% - 2.5rem), transparent 100%); } /* Yüzen kontrol: ortada, "+N devamı var" / en altta "başa dön" oku. Yalnızca taşma varsa görünür; hafifçe inip kalkar. */ .perm-box__hint { position: absolute; left: 50%; bottom: 0.25rem; z-index: 2; display: none; align-items: center; gap: 0.1875rem; height: 1.625rem; padding: 0 0.4375rem; border-radius: 9999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-brand); box-shadow: var(--shadow-sm); cursor: pointer; animation: perm-bob 1.9s var(--ease-out) infinite; transition: border-color 0.15s, color 0.15s; } .perm-box.has-overflow .perm-box__hint { display: inline-flex; } .perm-box__hint:hover { border-color: var(--c-brand); } .perm-box__count { font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-brand-700); } .perm-box__count:empty { display: none; } .perm-box__chev { transition: transform 0.2s var(--ease-out); } /* En alta inince yukarı oka döner, sayaç gizlenir */ .perm-box.is-end .perm-box__chev { transform: rotate(180deg); } @keyframes perm-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 2.5px); } } .perm-list { display: grid; } /* Tekli satır — gri yok, ince ayraç, sıcak marka-soft ikon */ .perm-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.25rem; } .perm-row:not(:last-child) { border-bottom: 1px solid var(--c-border-subtle); } .perm-row__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); /* Gri yerine sıcak marka-soft + turuncu ikon */ background: var(--c-brand-soft); color: var(--c-brand); } .perm-row__label { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; color: var(--c-ink); } .perm-row__check { flex-shrink: 0; color: var(--c-ink-dim); } /* ---------- Aksiyonlar + güvence notu ---------- */ .consent-actions { display: grid; gap: 0.5rem; } .consent-note { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.75rem; line-height: 1.5; color: var(--c-ink-soft); text-align: left; } .consent-note .icon { flex-shrink: 0; margin-top: 0.0625rem; color: var(--c-success); } /* ================================================================= Alt bilgi — anket UI'deki Footer bileşeninin birebir portu ================================================================= */ .footer-wrap { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 1.5rem 1.5rem; } .site-footer { overflow: hidden; border: 1px solid rgb(255 255 255 / 0.7); border-radius: 20px; /* Cam efekti — yazı kontrastı korunsun diye saydamlık ölçülü (0.62) */ background: rgb(255 255 255 / 0.62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 6px 22px rgba(18, 23, 38, 0.08), inset 0 1px 0 0 rgb(255 255 255 / 0.5); } .site-footer__top { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.75rem 1.5rem; } @media (min-width: 640px) { .site-footer__top { flex-direction: row; align-items: center; justify-content: space-between; padding-left: 2.5rem; padding-right: 2.5rem; } } .site-footer__logo { height: 3.5rem; width: auto; } @media (min-width: 640px) { .site-footer__logo { height: 4rem; } } .site-footer__contacts { display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .site-footer__contacts { flex-direction: row; align-items: center; gap: 2rem; } } .site-footer__contact { display: grid; gap: 0.25rem; } .site-footer__contact-label { font-size: 0.8125rem; color: var(--c-ink-soft); } .site-footer__phone { display: flex; align-items: center; gap: 0.5rem; font-size: 2rem; line-height: 1; font-weight: 700; color: var(--c-ink-soft); } .site-footer__phone .icon { color: var(--c-brand); } .site-footer__divider { display: none; height: 3rem; width: 1px; background: var(--c-border-subtle); } @media (min-width: 640px) { .site-footer__divider { display: block; } } .site-footer__wa { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; color: var(--c-ink-soft); } .site-footer__wa .icon { flex-shrink: 0; color: var(--c-brand); } .site-footer__wa-text { line-height: 1.1; } .site-footer__wa-code { display: block; font-size: 1.375rem; line-height: 1; font-weight: 700; letter-spacing: -0.025em; } .site-footer__wa-rest { display: block; margin-top: 0.25rem; font-size: 0.75rem; line-height: 1; font-weight: 500; } .site-footer__bar { height: 3px; width: 100%; background-image: linear-gradient(90deg, var(--c-brand-bright) 0%, var(--c-brand) 100%); } .site-footer__bottom { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.5rem; background: rgb(255 255 255 / 0.35); } @media (min-width: 640px) { .site-footer__bottom { flex-direction: row; align-items: center; padding-left: 2.5rem; padding-right: 2.5rem; } } .site-footer__copyright { font-size: 0.75rem; font-weight: 600; color: var(--c-ink); } .site-footer__developer { margin-top: 0.125rem; font-size: 0.6875rem; font-weight: 500; color: var(--c-ink-soft); } .site-footer__version { flex-shrink: 0; border: 1px solid var(--c-brand-200); border-radius: 9999px; background: var(--c-brand-50); padding: 0.25rem 0.625rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--c-brand-700); } /* ================================================================= Bildirim (Toast) ================================================================= */ .toast-host { position: fixed; inset-inline: 0; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-inline: 1rem; pointer-events: none; } @media (min-width: 640px) { .toast-host { left: auto; right: 1rem; align-items: flex-end; } } .toast { display: flex; width: 100%; max-width: 24rem; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in 0.26s var(--ease-out); } .toast.is-leaving { animation: toast-out 0.2s var(--ease-out) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.98); } } .toast__icon { margin-top: 0.125rem; flex-shrink: 0; } .toast__icon--info { color: var(--c-info); } .toast__icon--success { color: var(--c-success); } .toast__icon--error { color: var(--c-danger); } .toast__body { min-width: 0; flex: 1; } .toast__title { font-size: 0.875rem; font-weight: 600; color: var(--c-ink); } .toast__text { margin-top: 0.125rem; font-size: 0.875rem; color: var(--c-ink-soft); } /* ---------- İkon ---------- */ .icon { flex-shrink: 0; } /* Erişilebilirlik: hareketi azalt */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ================================================================= Sunucu formu — prototipte alanlar doğrudan .screen grid çocuğuydu; sunucu render'ında

ile sarıldıkları için grid boşluğu kaybolur. Formu da aynı ritimde grid yaparak alan aralıklarını geri getiriyoruz. (type=hidden inputlar display:none olduğundan hayalet boşluk oluşmaz.) ================================================================= */ .screen > form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } /* ================================================================= Sunucu tarafı bildirim bandı (TempData/ViewData hata/başarı) Yeni tasarımda yalnızca toast/field-error vardı; sunucu render'ı için sayfa üstünde sabit bir bant gerekiyor. ================================================================= */ .auth-alert { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: 500; line-height: 1.45; } .auth-alert .icon { flex-shrink: 0; margin-top: 0.0625rem; } .auth-alert--error { background: var(--c-danger-soft); color: var(--c-danger); border: 1px solid rgb(220 38 38 / 0.25); } .auth-alert--success { background: var(--c-success-soft); color: var(--c-success); border: 1px solid rgb(22 163 74 / 0.25); } .auth-alert--info { background: var(--c-brand-soft); color: var(--c-brand-700); border: 1px solid var(--c-brand-200); } /* WhatsApp destek görseli — kart içinde ortalı, ölçülü */ .auth-support { display: block; width: 100%; max-width: 320px; margin: 0.5rem auto 0; } /* Kart altı ikincil bağlantı satırı (ör. "telefon ile giriş") */ .auth-switchline { text-align: center; font-size: 0.875rem; color: var(--c-ink-soft); } .auth-switchline a { font-weight: 600; color: var(--c-brand-700); } .auth-switchline a:hover { color: var(--c-brand); } /* ================================================================= 4 Kutulu Giriş Pipeline Animasyonu (Login Pipeline) ================================================================= */ .btn--login-auth { position: relative; overflow: hidden; min-height: 50px; } .btn--login-auth .btn__label { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .btn--login-auth .login-pipeline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.96); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } /* Yükleme / Doğrulama Durumu */ .btn--login-auth.is-authenticating { cursor: wait; box-shadow: 0 6px 18px rgb(var(--c-brand-rgb) / 0.45); } .btn--login-auth.is-authenticating .btn__label { opacity: 0; transform: translateY(-8px) scale(0.96); } .btn--login-auth.is-authenticating .login-pipeline { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .pipeline-track { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 270px; padding: 0 0.5rem; } /* Kutular (Nodes) */ .pipeline-node { position: relative; z-index: 2; flex-shrink: 0; } .pipeline-node .node-box { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Aktif / Geçilmiş Kutu */ .pipeline-node.is-active .node-box, .pipeline-node.is-passed .node-box { background: #ffffff; border-color: #ffffff; color: var(--c-brand-700); transform: scale(1.08); box-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 3px 8px rgba(0, 0, 0, 0.18); } .pipeline-node.is-active .node-box { animation: node-pulse 1.2s infinite ease-in-out; } @keyframes node-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 3px 8px rgba(0, 0, 0, 0.15); } 50% { box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 4px 12px rgba(255, 255, 255, 0.6); transform: scale(1.12); } } /* Çubuklar (Connecting Lines) */ .pipeline-line { flex: 1; min-width: 18px; height: 3px; background: rgba(255, 255, 255, 0.22); border-radius: 99px; position: relative; overflow: hidden; margin: 0 2px; z-index: 1; } .pipeline-line .line-fill { width: 0%; height: 100%; background: #ffffff; box-shadow: 0 0 8px #ffffff, 0 0 14px rgba(255, 255, 255, 0.8); transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1); border-radius: inherit; } .pipeline-line.is-filled .line-fill { width: 100%; } /* Kilit Kutusu & Açılma Efekti (Box 4) */ .node-box--lock { position: relative; } .node-box--lock .lock-svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .node-box--lock .lock-shackle { transform-origin: 17px 11px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .node-box--lock .unlock-check-svg { position: absolute; opacity: 0; transform: scale(0.5); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Kilit Bekleme Nabzı (Waiting on Server) */ .pipeline-node.is-waiting-lock .node-box--lock { background: #ffffff; border-color: #ffffff; color: var(--c-brand-700); animation: lock-wait-pulse 1s infinite ease-in-out; } @keyframes lock-wait-pulse { 0%, 100% { transform: scale(1.08); box-shadow: 0 0 12px rgba(255, 255, 255, 0.85); } 50% { transform: scale(1.15); box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 16px var(--c-brand-bright); } } /* Kilit Açıldı Durumu (Success & Unlocked) */ .pipeline-node.is-unlocked .node-box--lock { background: #ffffff; border-color: #ffffff; color: var(--c-success, #16a34a); transform: scale(1.16); box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 16px rgba(34, 197, 94, 0.6); } .pipeline-node.is-unlocked .lock-shackle { transform: translateY(-4px) rotate(-28deg); } .pipeline-node.is-unlocked .lock-svg { animation: lock-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes lock-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } } /* Hata Durumu (Error State) */ .btn--login-auth.is-error { animation: pipeline-shake 0.5s ease-in-out; } .btn--login-auth.is-error .pipeline-node .node-box { background: var(--c-danger, #dc2626) !important; border-color: #ffffff !important; color: #ffffff !important; box-shadow: 0 0 16px rgba(220, 38, 38, 0.75) !important; } .btn--login-auth.is-error .pipeline-line .line-fill { background: var(--c-danger, #dc2626) !important; box-shadow: 0 0 8px rgba(220, 38, 38, 0.8) !important; } @keyframes pipeline-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } /* SMS Gönderim Pipeline Özelleştirmeleri */ .pipeline-track--sms { max-width: 220px; } .node-box--sms-done { position: relative; } .node-box--sms-done .sms-check-icon { display: none; } .pipeline-node.is-unlocked .node-box--sms-done { background: #ffffff; border-color: #ffffff; color: var(--c-success, #16a34a); transform: scale(1.16); box-shadow: 0 0 24px rgba(255, 255, 255, 1), 0 0 16px rgba(34, 197, 94, 0.6); } .pipeline-node.is-unlocked .node-box--sms-done .sms-send-icon { display: none; } .pipeline-node.is-unlocked .node-box--sms-done .sms-check-icon { display: block; animation: lock-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }