/* ===================================================================== İLK KULLANICI ÖĞRETİCİSİ (2026-10-04) — dash-ogretici.js ile birlikte. Katmanlar Bootstrap modalının (1055) ÜSTÜNDE ama modal açılınca betik balonu gizler. Düğmeler site standardı .site-dgm (bkz. button.css) — vekilli sayfalarda o dosya yüklü olmayabileceği için aynı kurallar burada da kapsamlı olarak var. ===================================================================== */ .ogr-isik { position: fixed; z-index: 1070; display: none; pointer-events: none; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .52), 0 0 0 3px rgba(255, 255, 255, .9) inset; transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; } .ogr-balon { position: fixed; z-index: 1071; display: none; width: 340px; max-width: calc(100vw - 32px); background: #fff; color: #1d2939; border-radius: 12px; box-shadow: 0 14px 44px rgba(15, 23, 42, .30); padding: 16px 18px 16px; font-size: 14px; line-height: 1.5; } .ogr-balon.ogr-orta { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 380px; } .ogr-ilerleme { font-size: 11.5px; font-weight: 700; color: #667085; letter-spacing: .05em; margin-bottom: 2px; } .ogr-baslik { font-size: 16px; font-weight: 700; color: #005095; margin: 0 28px 6px 0; } .ogr-metin { color: #344054; } .ogr-metin b { color: #1d2939; } .ogr-ek { margin-top: 8px; font-size: 13px; color: #475467; background: #f6f8fd; border-radius: 8px; padding: 8px 10px; } .ogr-ek a, .ogr-metin a { color: #005095; font-weight: 600; } .ogr-liste { margin: 4px 0 8px; padding-left: 18px; } .ogr-liste li { margin-bottom: 4px; } .ogr-kapat { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: #98a2b3; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px; } .ogr-kapat:hover { background: #f2f4f7; color: #475467; } .ogr-dgm-satir { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; } .ogr-orta-dgm { justify-content: center; } .ogr-ok { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); display: none; } .ogr-ok-alt .ogr-ok { display: block; top: -7px; box-shadow: -2px -2px 3px rgba(15, 23, 42, .06); } .ogr-ok-ust .ogr-ok { display: block; bottom: -7px; box-shadow: 2px 2px 3px rgba(15, 23, 42, .08); } /* site düğme standardı (button.css ikizi; balon ve karşılama kartı içinde) */ .ogr-balon .site-dgm, .ogr-k .site-dgm { flex: 1 1 0; max-width: 200px; min-height: 42px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .ogr-balon .site-dgm-birincil, .ogr-k .site-dgm-birincil { background: #005095; border: 1px solid #005095; color: #fff; font-weight: 700; } .ogr-balon .site-dgm-birincil:hover, .ogr-k .site-dgm-birincil:hover { background: #003d73; border-color: #003d73; color: #fff; } .ogr-balon .site-dgm-ikincil, .ogr-k .site-dgm-ikincil { background: #fff; border: 1px solid #d0d8e8; color: #5c6c7a; } .ogr-balon .site-dgm-ikincil:hover, .ogr-k .site-dgm-ikincil:hover { background: #f2f5f8; border-color: #aebbd0; color: #1d2939; } .ogr-balon .site-dgm:focus-visible, .ogr-k .site-dgm:focus-visible { outline: 2px solid #7ab3e0; outline-offset: 2px; } /* ---- karşılama kartı (3 ikon) ---- */ .ogr-k { position: fixed; inset: 0; z-index: 1072; display: flex; align-items: center; justify-content: center; padding: 16px; } .ogr-k-arka { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); } .ogr-k-kart { position: relative; width: 100%; max-width: 520px; background: #fff; border-radius: 16px; padding: 28px 26px 22px; text-align: center; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); animation: ogrGir .22s ease-out; } .ogr-k-ikonlar { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin: 6px 0 18px; } .ogr-k-ikon { display: flex; flex-direction: column; align-items: center; width: 118px; } .ogr-k-daire { position: relative; width: 60px; height: 60px; border-radius: 50%; background: #eef4fb; color: #005095; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .ogr-k-no { position: absolute; top: -3px; right: -3px; width: 20px; height: 20px; border-radius: 50%; background: #005095; color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; } .ogr-k-etiket { font-size: 12.5px; font-weight: 600; color: #344054; line-height: 1.3; } .ogr-k-ok { color: #b0bccb; margin-top: 21px; flex: 0 0 auto; } .ogr-k-kart h3 { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 8px; } .ogr-k-kart p { color: #475467; font-size: 14.5px; line-height: 1.55; margin: 0 auto 18px; max-width: 410px; } @keyframes ogrGir { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } /* ---- başlıktaki "?" düğmesi ---- */ /*