/* ============================================================================ KARŞILAMA + GİRİŞ sayfaları — eduon.css + elomoas.css SONRASI katman. İLKE: eduon = tasarım sistemi, elomoas = tema katmanı, bu dosya = yalnız anonim yüzeyin (karşılama '/', /Account/Login, Mufredat vitrini) sayfa desenleri. Renk ve ölçüler token'lardan gelir (var(--...)); elomoas kaldırılırsa bu sayfalar kendiliğinden EDUON diline döner. HAREKET İLKELERİ (2026-09-05 yeniden tasarım): - Yalnız opacity + transform animasyonu: yerleşim kayması yok, GPU dostu. - Sayfa içi kademeli giriş (.k-giris) ve kaydırma-açığa-çıkma (.k-reveal) JS'e bağlı DEĞİL: JS yoksa her şey görünür; JS varsa ile gizlenip kesişince açılır (wwwroot/js/karsilama.js). - prefers-reduced-motion: tüm animasyonlar kapanır, içerik anında görünür (eduon.css yalnız transition'ı kapatıyor; animation burada kapatılır). - Kontrast: koyu zemin üstü metinler ≥ .78 alfa; rozet koyu yeşil (AA). Yalnız _LayoutBos'tan yüklenir; kabuklu iç sayfalara (_Layout) dokunmaz. Fredoka One elomoas.css'in @import'undan gelir; yoksa sistem fontuna düşer. ============================================================================ */ :root { --k-ease: cubic-bezier(.22, .61, .36, 1); --k-golge-derin: 0 24px 60px rgba(34, 46, 60, .16); } /* ---------- ANİMASYON TANIMLARI ---------- */ @keyframes k-yukari { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes k-suzul { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -12px, 0); } } @keyframes k-orb-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(44px, -32px) scale(1.08); } } @keyframes k-orb-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-38px, 26px) scale(1.12); } } @keyframes k-parilti { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes k-nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 216, 118, .55); } 70% { box-shadow: 0 0 0 9px rgba(16, 216, 118, 0); } } @keyframes k-cubuk { from { transform: scaleY(.15); } to { transform: scaleY(1); } } @keyframes k-sallan { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } } @keyframes k-donen { to { transform: rotate(360deg); } } @keyframes k-zipla { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } } /* Sayfa yüklenince kademeli giriş (hero, login kartı) */ .k-giris { animation: k-yukari .75s var(--k-ease) both; } .k-giris.g1 { animation-delay: .05s; } .k-giris.g2 { animation-delay: .16s; } .k-giris.g3 { animation-delay: .27s; } .k-giris.g4 { animation-delay: .38s; } .k-giris.g5 { animation-delay: .5s; } /* Kaydırınca açığa çıkma — yalnız JS hazırsa gizlenir (JS yok = görünür). Animasyon 'backwards' doldurur: bitince öğede transform KALMAZ, böylece .k-kart:hover / .k-ilke:hover kaldırma efektleri ezilmez. */ html.k-js .k-reveal:not(.k-goster) { opacity: 0; } html.k-js .k-reveal.k-goster { animation: k-yukari .7s var(--k-ease) backwards; } html.k-js .k-reveal.k-goster[data-gecikme="1"] { animation-delay: .08s; } html.k-js .k-reveal.k-goster[data-gecikme="2"] { animation-delay: .16s; } html.k-js .k-reveal.k-goster[data-gecikme="3"] { animation-delay: .24s; } html.k-js .k-reveal.k-goster[data-gecikme="4"] { animation-delay: .32s; } html.k-js .k-reveal.k-goster[data-gecikme="5"] { animation-delay: .4s; } /* ---------- ÜST BAR (_LayoutBos) — yapışkan, cam efekti ---------- */ .bos-ustbar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 13px 22px; min-height: 64px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(225, 225, 240, .7); } .bos-marka { font-family: 'Fredoka One', Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 20px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .25s var(--k-ease); } .bos-marka:hover { color: var(--text); transform: translateY(-1px); } .bos-marka .k-ai { color: var(--blue); } .bos-marka .k-marka-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(16, 216, 118, .55); animation: k-nabiz 2.4s infinite; } /* ---------- HERO ---------- */ .k-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; padding: clamp(72px, 10vh, 120px) 24px clamp(64px, 9vh, 100px); } .k-hero::after { /* ince ızgara dokusu: derinlik, dikkat çekmeden */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); } .k-orb { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(64px); opacity: .8; will-change: transform; } .k-orb.a { width: 560px; height: 560px; right: -160px; top: -240px; background: radial-gradient(circle, rgba(30, 116, 253, .75), transparent 62%); animation: k-orb-a 14s ease-in-out infinite; } .k-orb.b { width: 460px; height: 460px; left: -180px; bottom: -240px; background: radial-gradient(circle, rgba(16, 216, 118, .5), transparent 62%); animation: k-orb-b 17s ease-in-out infinite; } .k-orb.c { width: 320px; height: 320px; left: 42%; top: 58%; background: radial-gradient(circle, rgba(103, 59, 183, .55), transparent 62%); animation: k-orb-a 21s ease-in-out infinite reverse; } .k-hero-ic { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .k-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 11px; letter-spacing: .18em; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 13px; } .k-hero .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: k-nabiz 2.4s infinite; } .k-hero h1 { font-family: 'Fredoka One', Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: clamp(42px, 5.6vw, 68px); margin: 18px 0 8px; line-height: 1.04; letter-spacing: .01em; } .k-hero h1 .k-ai { /* akan gradyan: mavi → yeşil → mavi; koyu zeminde parlak, okunur */ background: linear-gradient(90deg, #5aa0ff, #10d876, #5aa0ff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: k-parilti 6s linear infinite; } .k-hero .k-slogan { max-width: 560px; margin: 14px 0 0; font-size: clamp(16px, 1.55vw, 19px); color: rgba(255, 255, 255, .8); line-height: 1.65; } .k-hero .k-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .k-hero .button { min-height: 46px; padding: 0 22px; font-size: 13px; border-radius: 12px; transition: transform .25s var(--k-ease), box-shadow .25s var(--k-ease), background-color .25s; } .k-hero .button.primary { box-shadow: 0 10px 26px rgba(30, 116, 253, .35); } .k-hero .button.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(30, 116, 253, .45); } .k-hero .button.secondary { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; } .k-hero .button.secondary:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); } .k-ipucu { display: inline-flex; margin-top: 40px; color: rgba(255, 255, 255, .5); font-size: 22px; text-decoration: none; animation: k-zipla 1.9s ease-in-out infinite; } .k-ipucu:hover { color: #fff; } /* Hero vitrini: CSS ile çizilmiş "sınav telemetrisi" kartı (dekoratif). Süzülme İÇ öğede: sarmalayıcı .k-giris giriş animasyonunu taşır, ikisi aynı öğede olsa sonraki kural girişi ezerdi. */ .k-vitrin-sar .k-vitrin { animation: k-suzul 7s ease-in-out infinite; } .k-vitrin { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: 20px 22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .88); font-size: 13px; } .k-vitrin-bas { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 14px; } .k-vitrin-bas .k-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: k-nabiz 2.4s infinite; } .k-vitrin-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; } .k-vitrin-satir + .k-vitrin-satir { border-top: 1px solid rgba(255, 255, 255, .08); } .k-etiket { font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px; } .k-etiket.yesil { background: rgba(16, 216, 118, .18); color: #9ff5cc; } .k-cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 12px 0 6px; } .k-cubuklar i { flex: 1; display: block; height: calc(var(--h, .5) * 100%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #5aa0ff, rgba(30, 116, 253, .35)); transform-origin: bottom; animation: k-cubuk .9s var(--k-ease) both; } .k-cubuklar i.vurgu { background: linear-gradient(180deg, #10d876, rgba(16, 216, 118, .35)); } .k-cubuklar i:nth-child(1) { animation-delay: .55s; } .k-cubuklar i:nth-child(2) { animation-delay: .62s; } .k-cubuklar i:nth-child(3) { animation-delay: .69s; } .k-cubuklar i:nth-child(4) { animation-delay: .76s; } .k-cubuklar i:nth-child(5) { animation-delay: .83s; } .k-cubuklar i:nth-child(6) { animation-delay: .9s; } .k-cubuklar i:nth-child(7) { animation-delay: .97s; } .k-cubuklar i:nth-child(8) { animation-delay: 1.04s; } .k-vitrin-alt { margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .55); } /* ---------- BÖLÜM iskeleti ---------- */ .k-bolum { max-width: 1080px; margin: 0 auto; padding: clamp(52px, 8vh, 84px) 24px 0; scroll-margin-top: 72px; } /* yapışkan üst bar payı (#ozellikler) */ .k-bolum-bas { text-align: center; margin-bottom: 34px; } .k-bolum-bas .section-kicker { font-size: 11px; color: var(--muted); letter-spacing: .18em; } .k-bolum-bas h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; margin: 10px 0 0; color: var(--text); letter-spacing: -.01em; } /* ---------- ÖZELLİK KARTLARI ---------- */ .k-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .k-kart { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 24px; display: flex; flex-direction: column; gap: 11px; transition: transform .35s var(--k-ease), box-shadow .35s var(--k-ease), border-color .35s var(--k-ease); } .k-kart::before { /* üst vurgu çizgisi: hover'da soldan açılır */ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--k-ease); } .k-kart:hover { transform: translateY(-6px); box-shadow: var(--k-golge-derin); border-color: rgba(30, 116, 253, .35); } .k-kart:hover::before { transform: scaleX(1); } .k-kart h3 { font-size: 16.5px; font-weight: 700; margin: 0; color: var(--text); } .k-kart p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); flex: 1; } .k-kart-ikon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; transition: transform .35s var(--k-ease), box-shadow .35s var(--k-ease); } .k-kart:hover .k-kart-ikon { transform: rotate(-6deg) scale(1.08); } .k-kart-ikon.mavi { background: rgba(30, 116, 253, .12); color: var(--blue); } .k-kart-ikon.yesil { background: rgba(16, 216, 118, .14); color: var(--green); } .k-kart-ikon.turuncu { background: rgba(254, 148, 49, .16); color: var(--orange); } .k-kart-ikon.mor { background: rgba(103, 59, 183, .12); color: var(--purple); } .k-kart:hover .k-kart-ikon.mavi { box-shadow: 0 8px 20px rgba(30, 116, 253, .25); } .k-kart:hover .k-kart-ikon.yesil { box-shadow: 0 8px 20px rgba(16, 216, 118, .25); } .k-kart:hover .k-kart-ikon.turuncu { box-shadow: 0 8px 20px rgba(254, 148, 49, .25); } .k-kart:hover .k-kart-ikon.mor { box-shadow: 0 8px 20px rgba(103, 59, 183, .25); } /* ---------- AI (YAKINDA) şeridi — gradyan kenarlık ---------- */ .k-ai-serit { position: relative; border: 1px solid transparent; border-radius: 18px; background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(120deg, rgba(30, 116, 253, .7), rgba(16, 216, 118, .7), rgba(103, 59, 183, .7)); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: var(--shadow); padding: clamp(26px, 4vw, 42px); display: flex; gap: 24px; align-items: center; } .k-ai-serit .k-kart-ikon { width: 60px; height: 60px; font-size: 28px; flex: none; background: linear-gradient(135deg, rgba(30, 116, 253, .16), rgba(103, 59, 183, .16)); color: var(--blue); } .k-ai-serit h2 { font-size: clamp(20px, 2.1vw, 26px); font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; } .k-ai-serit p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 62ch; } .k-rozet { display: inline-flex; align-items: center; gap: 7px; background: rgba(16, 216, 118, .14); /* var(--green) burada 1.7:1 kalıyordu (AA 4.5:1 ister) — koyu yeşil sabit */ color: #0b7c48; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; } .k-rozet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: k-nabiz 2.2s infinite; } /* ---------- İLKELER — çip şeridi ---------- */ .k-ilkeler { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .k-ilke { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 13.5px; color: var(--text); transition: transform .3s var(--k-ease), border-color .3s var(--k-ease), box-shadow .3s var(--k-ease); } .k-ilke:hover { transform: translateY(-2px); border-color: rgba(16, 216, 118, .55); box-shadow: 0 10px 24px rgba(34, 46, 60, .08); } .k-ilke .bi { color: var(--green); font-size: 17px; flex: none; } /* ---------- ALT BİLGİ ---------- */ .k-alt { text-align: center; padding: clamp(44px, 7vh, 64px) 24px 32px; color: var(--muted); font-size: 12.5px; } .k-alt strong { color: var(--text); } /* ---------- GİRİŞ (login) ---------- */ .login-sahne { min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: grid; place-items: center; padding: 24px; background: radial-gradient(700px 400px at 100% 0%, rgba(30, 116, 253, .07), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(16, 216, 118, .06), transparent 70%); } .login-kart { width: 100%; max-width: 900px; display: grid; grid-template-columns: 5fr 6fr; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--k-golge-derin); overflow: hidden; animation: k-yukari .65s var(--k-ease) both; } .login-marka { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: #fff; padding: 40px 36px; display: flex; flex-direction: column; gap: 8px; } .login-marka .k-orb.a { width: 380px; height: 380px; right: -140px; top: -160px; } .login-marka .k-orb.b { width: 300px; height: 300px; left: -120px; bottom: -150px; } .login-marka h1 { font-family: 'Fredoka One', Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 34px; margin: 0; } .login-marka h1 .k-ai { background: linear-gradient(90deg, #5aa0ff, #10d876, #5aa0ff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: k-parilti 6s linear infinite; } .login-marka .login-kurum { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .login-marka ul { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .login-marka li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); animation: k-yukari .6s var(--k-ease) both; } .login-marka li:nth-child(1) { animation-delay: .25s; } .login-marka li:nth-child(2) { animation-delay: .35s; } .login-marka li:nth-child(3) { animation-delay: .45s; } .login-marka li .bi { color: var(--green); flex: none; margin-top: 1px; } .login-marka .login-sezon { margin-top: auto; padding-top: 28px; font-size: 12.5px; color: rgba(255, 255, 255, .55); } .login-form { padding: 40px 38px; } .login-form h2 { font-size: 22px; font-weight: 800; margin: 0 0 4px; color: var(--text); letter-spacing: -.01em; } .login-form .login-alt-baslik { font-size: 13.5px; color: var(--muted); margin: 0 0 24px; } .login-alan { position: relative; } .login-alan > .bi { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; transition: color .25s; } .login-alan:focus-within > .bi { color: var(--blue); } .login-alan .form-control { padding-left: 40px; min-height: 46px; border-radius: 11px; transition: box-shadow .25s var(--k-ease), border-color .25s var(--k-ease); } .login-alan .form-control:focus { box-shadow: 0 0 0 4px rgba(30, 116, 253, .14); } .login-alan.parola .form-control { padding-right: 46px; } .login-goz { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 16px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; transition: background-color .2s, color .2s; } .login-goz:hover, .login-goz:focus-visible { color: var(--blue); background: rgba(30, 116, 253, .08); outline: none; } .login-goz:focus-visible { box-shadow: 0 0 0 3px rgba(30, 116, 253, .25); } .login-form .alert-danger { animation: k-sallan .5s var(--k-ease); } .login-form .btn-primary { min-height: 46px; border-radius: 11px; font-weight: 700; transition: transform .2s var(--k-ease), box-shadow .2s var(--k-ease); } .login-form .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(30, 116, 253, .3); } .login-form .btn-primary.yukleniyor { pointer-events: none; opacity: .85; } .login-form .btn-primary.yukleniyor::after { content: ""; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; display: inline-block; margin-left: 9px; vertical-align: -3px; animation: k-donen .8s linear infinite; } /* ---------- KIRILIMLAR ---------- */ @media (max-width: 900px) { .k-hero { text-align: center; } .k-hero-ic { grid-template-columns: 1fr; gap: 36px; } .k-hero .k-slogan { margin-left: auto; margin-right: auto; } .k-hero .k-cta { justify-content: center; } .k-vitrin { max-width: 380px; margin: 0 auto; } .k-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .login-kart { grid-template-columns: 1fr; max-width: 460px; } .login-marka { padding: 28px 28px; } .login-marka ul { display: none; } /* dar ekranda öz: marka + form */ .login-marka .login-sezon { display: none; } } @media (max-width: 620px) { .k-izgara { grid-template-columns: 1fr; } .k-ai-serit { flex-direction: column; align-items: flex-start; } .login-form { padding: 28px 24px; } .k-orb { filter: blur(48px); } } /* ---------- CANLI ÖRNEK KÖŞESİ ("AI iş başında") ---------- */ @keyframes k-genis { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes k-ciz { to { stroke-dashoffset: 0; } } @keyframes k-belir { from { opacity: 0; } to { opacity: 1; } } @keyframes k-imlec { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes k-ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes k-parla { 0% { box-shadow: 0 0 0 0 rgba(16, 216, 118, .0); } 40% { box-shadow: 0 0 0 4px rgba(16, 216, 118, .25); } 100% { box-shadow: 0 0 0 0 rgba(16, 216, 118, 0); } } .k-bolum-alt { max-width: 640px; margin: 12px auto 0; color: var(--muted); font-size: 15px; line-height: 1.6; } .k-demo { position: relative; border-radius: 22px; background: linear-gradient(160deg, #1b2a3b 0%, var(--navy, #222e3c) 55%, #1a2f4a 100%); color: rgba(255, 255, 255, .9); box-shadow: var(--k-golge-derin); overflow: hidden; isolation: isolate; } .k-demo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 260px at 85% 0%, rgba(30, 116, 253, .35), transparent 70%), radial-gradient(420px 220px at 0% 100%, rgba(16, 216, 118, .22), transparent 70%); } .k-demo-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 0; } .k-demo-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; } .k-demo-oynat { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s, transform .25s var(--k-ease); } .k-demo-oynat:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); } .k-demo-oynat:focus-visible { outline: 2px solid #8fc0ff; outline-offset: 2px; } .k-demo-oynat[aria-pressed="true"] { background: #fff; color: var(--navy, #222e3c); border-color: #fff; } .k-demo-panel:focus-visible { outline: 2px solid #8fc0ff; outline-offset: 6px; border-radius: 12px; } .k-demo-sekme { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--k-ease); } .k-demo-sekme i { font-size: 15px; opacity: .9; } .k-demo-sekme:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-1px); } .k-demo-sekme:focus-visible { outline: 2px solid #8fc0ff; outline-offset: 2px; } .k-demo-sekme.aktif { background: #fff; color: var(--navy, #222e3c); border-color: #fff; } .k-demo-ilerleme { height: 3px; margin: 12px 0 0; background: rgba(255, 255, 255, .08); overflow: hidden; } .k-demo-ilerleme i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--green, #10d876), #1e74fd); } .k-demo.oynuyor .k-demo-ilerleme i { animation: k-ilerle var(--k-demo-sure, 7s) linear forwards; } .k-demo.duruk .k-demo-ilerleme i { animation-play-state: paused; } .k-demo-govde { padding: 18px 16px 18px; } .k-demo-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; } .k-demo-panel[hidden] { display: none; } .k-demo-panel-bas { grid-column: 1 / -1; margin: 6px 0 0; font-size: 16px; font-weight: 800; color: #fff; } .k-demo.k-demo-js .k-demo-panel-bas { display: none; } /* JS varken sekme başlıktır */ .k-demo:not(.k-demo-js) .k-demo-sekmeler, .k-demo:not(.k-demo-js) .k-demo-ilerleme { display: none; } .k-demo:not(.k-demo-js) .k-demo-panel { display: grid !important; } /* JS yoksa hepsi statik, alt alta */ .k-demo:not(.k-demo-js) .k-demo-panel + .k-demo-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); } .k-demo-gorsel, .k-demo-yorum { border-radius: 16px; padding: 16px 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); min-width: 0; } .k-demo-gorsel-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92); margin-bottom: 14px; } .k-demo-not { font-weight: 500; color: rgba(255, 255, 255, .62); font-size: 12px; } .k-demo-cipler, .k-demo-eylem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .k-demo-cip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); } .k-demo-cip.yesil { background: rgba(16, 216, 118, .18); color: #7ff0b6; } .k-demo-cip.uyari { background: rgba(255, 174, 66, .18); color: #ffd48a; } .k-demo-cip.kirmizi { background: rgba(255, 99, 99, .2); color: #ffb3b3; } .k-demo-cip.mavi { background: rgba(30, 116, 253, .28); color: #cfe2ff; } .k-demo-cip.soluk { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .76); } .k-demo-cip.nabiz { animation: k-parla 2.2s ease-out infinite; } /* 1 — soru başına süre çubukları */ .k-tl { display: grid; gap: 9px; } .k-tl-satir { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 10px; font-size: 13px; } .k-tl-ad { color: rgba(255, 255, 255, .72); } .k-tl-deger { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); } .k-tl-cubuk { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .k-tl-cubuk i { display: block; height: 100%; width: calc(var(--w, .5) * 100%); border-radius: inherit; background: linear-gradient(90deg, #3d8bff, #7fb3ff); transform-origin: left; } .k-demo.k-demo-js .k-tl-cubuk i, .k-demo.k-demo-js .k-kz-cubuk i { transform: scaleX(0); } /* JS'siz statik modda çubuk dolu görünür */ .k-tl-satir.vurgu .k-tl-ad, .k-tl-satir.vurgu .k-tl-deger { color: #fff; font-weight: 700; } .k-tl-satir.vurgu .k-tl-cubuk i { background: linear-gradient(90deg, #ffae42, #ff7a59); } .k-demo-panel.oynat .k-tl-cubuk i { animation: k-genis .9s var(--k-ease) forwards; } .k-demo-panel.oynat .k-tl-satir:nth-child(2) .k-tl-cubuk i { animation-delay: .12s; } .k-demo-panel.oynat .k-tl-satir:nth-child(3) .k-tl-cubuk i { animation-delay: .24s; } .k-demo-panel.oynat .k-tl-satir:nth-child(4) .k-tl-cubuk i { animation-delay: .36s; } /* 2 — kazanım başarı çubukları */ .k-kz { display: grid; gap: 10px; } .k-kz-satir { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; } .k-kz-ad { color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k-kz-deger { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); white-space: nowrap; } .k-kz-cubuk { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .k-kz-cubuk i { display: block; height: 100%; width: calc(var(--w, .5) * 100%); border-radius: inherit; background: linear-gradient(90deg, #10d876, #6ff0b0); transform-origin: left; } .k-kz-satir.dusuk .k-kz-ad, .k-kz-satir.dusuk .k-kz-deger { color: #ffb3b3; font-weight: 700; } .k-kz-satir.dusuk .k-kz-cubuk i { background: linear-gradient(90deg, #ff6b6b, #ff9a8b); } .k-demo-panel.oynat .k-kz-cubuk i { animation: k-genis .9s var(--k-ease) forwards; } .k-demo-panel.oynat .k-kz-satir:nth-child(2) .k-kz-cubuk i { animation-delay: .1s; } .k-demo-panel.oynat .k-kz-satir:nth-child(3) .k-kz-cubuk i { animation-delay: .2s; } .k-demo-panel.oynat .k-kz-satir:nth-child(4) .k-kz-cubuk i { animation-delay: .3s; } .k-demo-panel.oynat .k-kz-satir:nth-child(5) .k-kz-cubuk i { animation-delay: .4s; } /* 3 — devam eğrisi (SVG çizim animasyonu) */ .k-cizgi { display: block; width: 100%; height: 110px; overflow: visible; } .k-cizgi-esik { stroke: rgba(255, 255, 255, .18); stroke-width: 1; stroke-dasharray: 4 4; } .k-cizgi-yol { fill: none; stroke: #7fb3ff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 0; } .k-cizgi-nokta { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; opacity: 1; } .k-cizgi-nokta.son { stroke: #ff6b6b; stroke-width: 9; } .k-demo-panel.oynat .k-cizgi-yol { stroke-dashoffset: 420; animation: k-ciz 1.6s var(--k-ease) forwards; } .k-demo-panel.oynat .k-cizgi-nokta { opacity: 0; animation: k-belir .35s var(--k-ease) forwards; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(1) { animation-delay: .15s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(2) { animation-delay: .32s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(3) { animation-delay: .5s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(4) { animation-delay: .68s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(5) { animation-delay: .86s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(6) { animation-delay: 1.04s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(7) { animation-delay: 1.22s; } .k-demo-panel.oynat .k-cizgi-nokta:nth-of-type(8) { animation-delay: 1.45s; } /* 4 — soru taslağı, 5 — karne */ .k-soru { display: grid; gap: 7px; font-size: 14px; line-height: 1.5; } .k-soru-kok { margin: 0 0 4px; font-weight: 700; color: #fff; } .k-soru-sik { margin: 0; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .85); min-height: 1.5em; } .k-soru-sik b { color: rgba(255, 255, 255, .76); margin-right: 4px; } .k-soru-sik.dogru.bitti b { color: inherit; } .k-soru-sik.dogru.bitti { background: rgba(16, 216, 118, .16); color: #b8f5d3; box-shadow: inset 0 0 0 1px rgba(16, 216, 118, .45); } .k-karne { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .88); min-height: 4.5em; } /* yazıcı efekti */ .k-demo-yorum-bas { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 10px; } .k-demo-yorum-bas .k-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #10d876); animation: k-nabiz 2.4s infinite; } .k-demo-yazi { margin: 0; font-size: 14.5px; line-height: 1.65; color: #fff; min-height: 6.6em; } [data-yaz].yaziliyor::after { content: "▍"; margin-left: 1px; color: var(--green, #10d876); animation: k-imlec .8s steps(1) infinite; } @media (max-width: 900px) { .k-demo-panel { grid-template-columns: 1fr; } .k-demo-yazi { min-height: 0; } } @media (max-width: 620px) { .k-demo-sekme span { display: none; } /* dar ekranda yalnız ikon */ .k-demo-sekme { padding: 10px 12px; } .k-demo-sekme.aktif span { display: inline; } .k-tl-satir { grid-template-columns: 52px 1fr 44px; } .k-kz-satir { grid-template-columns: 1fr; gap: 4px; } } /* ---------- HAREKET AZALTMA: her animasyon kapanır, içerik anında görünür ---------- */ @media (prefers-reduced-motion: reduce) { .k-giris, .k-orb, .k-vitrin-sar, .k-cubuklar i, .k-ipucu, .k-hero h1 .k-ai, .login-marka h1 .k-ai, .k-rozet::before, .k-hero .eyebrow::before, .k-vitrin-bas .k-nokta, .bos-marka .k-marka-nokta, .login-kart, .login-marka li, .login-form .alert-danger, .login-form .btn-primary.yukleniyor::after { animation: none !important; } .k-demo-cip.nabiz, .k-demo-yorum-bas .k-nokta, .k-demo-ilerleme i, [data-yaz].yaziliyor::after, .k-demo-panel.oynat .k-tl-cubuk i, .k-demo-panel.oynat .k-kz-cubuk i, .k-demo-panel.oynat .k-cizgi-yol, .k-demo-panel.oynat .k-cizgi-nokta { animation: none !important; } .k-tl-cubuk i, .k-kz-cubuk i, .k-demo.k-demo-js .k-tl-cubuk i, .k-demo.k-demo-js .k-kz-cubuk i { transform: none; } .k-demo-panel.oynat .k-cizgi-yol { stroke-dashoffset: 0; } .k-demo-panel.oynat .k-cizgi-nokta { opacity: 1; } .k-hero h1 .k-ai, .login-marka h1 .k-ai { color: #5aa0ff; background: none; -webkit-background-clip: initial; background-clip: initial; } .k-cubuklar i { transform: none; } html.k-js .k-reveal { opacity: 1; transform: none; } }