/* ====================================================================== KIDEF · KAREKODLA GİRİŞ — görünüm (hesap/qrgiris.css) Pencere altında durur; sitenin başka hiçbir kuralına dokunmaz, tüm seçiciler #qrGirisPencere altındadır. ====================================================================== */ #qrGirisPencere { display: none; position: fixed; inset: 0; /* Giriş penceresi (#login-modal) 100000001'de duruyor — site kilidi perdesinin üstünde olsun diye. Karekod penceresi ONUN da üstünde olmalı, yoksa giriş ekranının ARKASINDA açılıyor. */ z-index: 100000050; background: rgba(15, 42, 67, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 18px; font-family: 'Nunito', 'Segoe UI', sans-serif; } #qrGirisPencere .qr-panel{ position: relative; background: #fff; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; border-radius: 20px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); padding: 22px 22px 20px; text-align: center; color: #2c3e50; } #qrGirisPencere .qr-kapat{ position: absolute; top: 10px; right: 12px; border: none; background: #f1f3f5; color: #6b7a88; width: 34px; height: 34px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .18s, color .18s; } #qrGirisPencere .qr-kapat:hover{ background: #ffe6e0; color: #c0392b; } #qrGirisPencere .qr-bas, #qr-modal-alan .qr-bas{ display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 1.22rem; font-weight: 800; color: #16A085; margin: 2px 30px 14px; } #qrGirisPencere .qr-anlat, #qr-modal-alan .qr-anlat{ margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: #5c6b78; } #qrGirisPencere .qr-yukleniyor, #qr-modal-alan .qr-yukleniyor{ padding: 34px 10px; color: #7c8b99; font-size: .98rem; } /* --- karekod kutusu --- */ #qrGirisPencere .qr-kutu, #qr-modal-alan .qr-kutu{ display: flex; align-items: center; justify-content: center; min-height: 216px; padding: 12px; background: #fff; border: 2px solid #E9EEF5; border-radius: 16px; margin: 0 auto 12px; width: max-content; max-width: 100%; } #qrGirisPencere .qr-kutu img, #qrGirisPencere .qr-kutu canvas, #qr-modal-alan .qr-kutu canvas{ display: block; max-width: 100%; height: auto; } #qrGirisPencere .qr-yok, #qr-modal-alan .qr-yok{ color: #8b98a4; font-size: .9rem; padding: 20px; } /* --- doğrulama kodu --- */ #qrGirisPencere .qr-kod-satir, #qr-modal-alan .qr-kod-satir{ background: #FFF8F2; border: 1.5px dashed #E67E22; border-radius: 12px; padding: 9px 14px; margin: 0 0 10px; font-size: .9rem; color: #8a5a20; } #qrGirisPencere .qr-kod-satir b, #qr-modal-alan .qr-kod-satir b{ display: inline-block; margin-left: 6px; font-size: 1.35rem; letter-spacing: 4px; font-weight: 900; color: #D84315; vertical-align: middle; } #qrGirisPencere .qr-kod-satir.buyuk b, #qr-modal-alan .qr-kod-satir.buyuk b{ font-size: 1.9rem; display: block; margin: 4px 0 2px; } #qrGirisPencere .qr-kod-satir small, #qr-modal-alan .qr-kod-satir small{ display: block; margin-top: 4px; color: #a58a6a; font-size: .78rem; line-height: 1.45; } /* Küçük yazının içindeki kodun dev biçimini miras almasın. ".qr-kod-satir.buyuk b" (1,2,1) daha güçlü olduğu için ".buyuk"lu sürüm de yazılmalı; yoksa uyarı satırı 1.9rem kalıyor. */ #qrGirisPencere .qr-kod-satir small b, #qrGirisPencere .qr-kod-satir.buyuk small b, #qr-modal-alan .qr-kod-satir.buyuk small b{ display: inline; margin: 0; font-size: inherit; letter-spacing: normal; color: #C0392B; } #qrGirisPencere .qr-sayac, #qr-modal-alan .qr-sayac{ font-size: .86rem; color: #8b98a4; font-weight: 700; margin-bottom: 10px; } /* --- durum şeridi --- */ #qrGirisPencere .qr-durum, #qr-modal-alan .qr-durum{ border-radius: 11px; padding: 10px 13px; font-size: .92rem; font-weight: 700; min-height: 20px; } #qrGirisPencere .qr-durum.bekliyor, #qr-modal-alan .qr-durum.bekliyor{ background: #EAF4FB; color: #2471A3; } #qrGirisPencere .qr-durum.onayli, #qr-modal-alan .qr-durum.onayli{ background: #EAF7EE; color: #1E8449; } #qrGirisPencere .qr-durum.hata, #qr-modal-alan .qr-durum.hata{ background: #FDECEA; color: #C0392B; } #qrGirisPencere .qr-durum.suredoldu, #qr-modal-alan .qr-durum.suredoldu{ background: #FEF5E7; color: #B9770E; } #qrGirisPencere .qr-durum:empty, #qr-modal-alan .qr-durum:empty{ display: none; } #qrGirisPencere .qr-uyari, #qr-modal-alan .qr-uyari{ background: #FEF5E7; border: 1px solid #F5CBA7; border-radius: 12px; padding: 14px 16px; color: #935116; font-size: .94rem; line-height: 1.5; } #qrGirisPencere .qr-bitti, #qr-modal-alan .qr-bitti{ padding: 22px 14px; font-size: 1.05rem; font-weight: 800; color: #5c6b78; } #qrGirisPencere .qr-bitti.iyi, #qr-modal-alan .qr-bitti.iyi{ color: #1E8449; } /* --- onay ekranı --- */ #qrGirisPencere .qr-bilgi, #qr-modal-alan .qr-bilgi{ display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F7F9FC; border: 1px solid #E9EEF5; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; text-align: left; } #qrGirisPencere .qr-bilgi span, #qr-modal-alan .qr-bilgi span{ font-size: .8rem; color: #8b98a4; font-weight: 700; } #qrGirisPencere .qr-bilgi b, #qr-modal-alan .qr-bilgi b{ font-size: .95rem; color: #2c3e50; text-align: right; word-break: break-word; } #qrGirisPencere .qr-onay-tuslar, #qr-modal-alan .qr-onay-tuslar{ display: flex; gap: 10px; margin: 12px 0 8px; } #qrGirisPencere .qr-onay-tuslar button, #qr-modal-alan .qr-onay-tuslar button{ flex: 1; border: none; border-radius: 12px; padding: 14px 10px; font: inherit; font-size: 1.02rem; font-weight: 800; cursor: pointer; transition: transform .12s, opacity .18s; } #qrGirisPencere .qr-onay-tuslar button:active, #qr-modal-alan .qr-onay-tuslar button:active{ transform: scale(.97); } #qrGirisPencere .qr-onay-tuslar button:disabled, #qr-modal-alan .qr-onay-tuslar button:disabled{ opacity: .55; cursor: default; } #qrGirisPencere .qr-onay, #qr-modal-alan .qr-onay{ background: #16A085; color: #fff; } #qrGirisPencere .qr-ret, #qr-modal-alan .qr-ret{ background: #ECF0F1; color: #7f8c8d; } /* --- alt satır --- */ #qrGirisPencere .qr-alt, #qr-modal-alan .qr-alt{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; } #qrGirisPencere .qr-alt a, #qr-modal-alan .qr-alt a{ color: #2471A3; font-size: .84rem; text-decoration: underline; } #qrGirisPencere .qr-yenile, #qr-modal-alan .qr-yenile{ border: 1.5px solid #16A085; background: #fff; color: #16A085; border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; } #qrGirisPencere .qr-yenile:hover, #qr-modal-alan .qr-yenile:hover{ background: #EAF7F3; } /* --- giriş penceresindeki tuş --- */ #qr-giris-satir { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; } #qr-giris-satir::before, #qr-giris-satir::after { content: ''; flex: 1; height: 1px; background: #E9EEF5; } .qr-giris-tus { display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid #16A085; background: #fff; color: #16A085; border-radius: 12px; padding: 10px 16px; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; white-space: nowrap; transition: background .18s, box-shadow .18s; } .qr-giris-tus:hover { background: #EAF7F3; box-shadow: 0 4px 14px rgba(22, 160, 133, .18); } .qr-giris-tus small { display: block; font-weight: 600; font-size: .72rem; color: #7c8b99; } .qr-giris-tus span { text-align: left; line-height: 1.15; } @media (max-width: 480px) { #qrGirisPencere .qr-panel { padding: 18px 15px 16px; border-radius: 16px; } #qrGirisPencere .qr-bas { font-size: 1.08rem; margin-right: 26px; } #qrGirisPencere .qr-kutu { min-height: 0; padding: 8px; } .qr-giris-tus { padding: 9px 12px; font-size: .86rem; } } /* --- teşhis listesi: "karekod çıkmıyor" dendiğinde nedenini gösterir --- */ #qrGirisPencere .qr-tani, #qr-modal-alan .qr-tani{ text-align: left; background: #F7F9FC; border: 1px solid #E9EEF5; border-radius: 12px; padding: 12px 14px; margin-top: 12px; font-size: .88rem; } #qrGirisPencere .qr-tani > b, #qr-modal-alan .qr-tani > b{ display: block; margin-bottom: 8px; color: #2c3e50; } #qrGirisPencere .qr-tani ul, #qr-modal-alan .qr-tani ul{ list-style: none; margin: 0; padding: 0; } #qrGirisPencere .qr-tani li, #qr-modal-alan .qr-tani li{ display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; border-top: 1px dashed #E9EEF5; } #qrGirisPencere .qr-tani li:first-child, #qr-modal-alan .qr-tani li:first-child{ border-top: none; } #qrGirisPencere .qr-tani li > span, #qr-modal-alan .qr-tani li > span{ flex: 0 0 auto; font-weight: 900; line-height: 1.4; } #qrGirisPencere .qr-tani li.var > span, #qr-modal-alan .qr-tani li.var > span{ color: #27AE60; } #qrGirisPencere .qr-tani li.yok > span, #qr-modal-alan .qr-tani li.yok > span{ color: #C0392B; } #qrGirisPencere .qr-tani li.var b, #qr-modal-alan .qr-tani li.var b{ color: #6b7a88; font-weight: 600; } #qrGirisPencere .qr-tani li.yok b, #qr-modal-alan .qr-tani li.yok b{ color: #C0392B; } #qrGirisPencere .qr-tani small, #qr-modal-alan .qr-tani small{ display: block; margin-top: 2px; color: #8b98a4; font-size: .78rem; line-height: 1.4; } /* ====================================================================== GİRİŞ PENCERESİ İÇİNDEKİ KAREKOD KİPİ Karekod ayrı bir katman değil, giriş penceresinin içinde formun YERİNE çizilir. Yukarıdaki .qr-* kuralları #qr-modal-alan için de yazıldığı için burada yalnız yerleşim farkları var. ====================================================================== */ #qr-modal-alan { text-align: center; } #qr-modal-alan .qr-ic { padding: 2px 0 0; } #qr-modal-alan .qr-bas { margin: 0 0 12px; font-size: 1.12rem; } #qr-modal-alan .qr-anlat { font-size: .9rem; margin-bottom: 12px; } #qr-modal-alan .qr-kutu { min-height: 0; padding: 10px; border-radius: 14px; } #qr-modal-alan .qr-durum { font-size: .88rem; padding: 9px 12px; } #qr-modal-alan .qr-tani { font-size: .84rem; } /* Klasik forma geçiş tuşu — karekodun altında, sade */ .qr-elle-tus { display: block; width: 100%; margin: 14px 0 0; padding: 12px 14px; border: 1.5px solid #E9EEF5; background: #F7F9FC; color: #5c6b78; border-radius: 12px; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .16s, border-color .16s, color .16s; } .qr-elle-tus:hover { background: #EEF3F9; border-color: #D8E2EC; color: #2c3e50; } /* Seçim ekranının altındaki kayıt satırı */ .qr-kayit { margin-top: 12px; text-align: center; font-size: .9rem; color: #6B7A8C; } .qr-kayit-tus { background: none; border: 0; padding: 0 2px; font: inherit; font-weight: 800; color: #16A085; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .qr-kayit-tus:hover { color: #0E8074; } @media (max-width: 480px) { #qr-modal-alan .qr-bas { font-size: 1.02rem; } #qr-modal-alan .qr-anlat { font-size: .85rem; } .qr-elle-tus { padding: 11px 12px; font-size: .88rem; } } /* ====================================================================== GİRİŞ SEÇİM EKRANI Pencere açılınca karekod ÜRETİLMEZ; büyük bir karekod kartı durur, tıklanınca üretilir. E-posta/şifre seçeneği altta, sade bir satır olarak bekler; tıklanınca form açılır. ====================================================================== */ #qr-modal-alan .qr-sec { padding: 4px 0 2px; } #qr-modal-alan .qr-kart { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 20px 18px; border: 2px solid #16A085; border-radius: 18px; background: linear-gradient(135deg, #F2FBF9 0%, #FFFFFF 60%); color: #16A085; font: inherit; cursor: pointer; box-shadow: 0 6px 20px rgba(22, 160, 133, .14); transition: transform .14s, box-shadow .18s, background .18s; } #qr-modal-alan .qr-kart:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(22, 160, 133, .22); background: linear-gradient(135deg, #EAF7F3 0%, #FFFFFF 60%); } #qr-modal-alan .qr-kart:active { transform: scale(.985); } #qr-modal-alan .qr-kart-ikon { flex: 0 0 auto; width: 64px; height: 64px; display: block; } #qr-modal-alan .qr-kart-ikon svg { width: 100%; height: 100%; display: block; overflow: hidden; } /* karekodun üstünde gezinen tarama çizgisi */ #qr-modal-alan .qr-kart .qr-tarama { animation: qrTara 2.6s ease-in-out infinite; } @keyframes qrTara { 0%, 100% { transform: translateY(-27px); opacity: .25; } 50% { transform: translateY(27px); opacity: .85; } } @media (prefers-reduced-motion: reduce) { #qr-modal-alan .qr-kart .qr-tarama { animation: none; } } #qr-modal-alan .qr-kart-yazi { flex: 1; min-width: 0; } #qr-modal-alan .qr-kart-yazi b { display: block; font-size: 1.14rem; font-weight: 800; color: #0E8C74; } #qr-modal-alan .qr-kart-yazi small { display: block; margin-top: 3px; font-size: .84rem; font-weight: 600; color: #7c8b99; line-height: 1.35; } #qr-modal-alan .qr-kart-ok { flex: 0 0 auto; font-size: 1.9rem; line-height: 1; color: #16A085; opacity: .55; } /* alttaki e-posta satırı */ #qr-modal-alan .qr-sec .qr-elle-tus { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; } .qr-elle-ikon { display: inline-flex; align-items: center; } @media (max-width: 480px) { #qr-modal-alan .qr-kart { padding: 15px 13px; gap: 12px; border-radius: 15px; } #qr-modal-alan .qr-kart-ikon { width: 50px; height: 50px; } #qr-modal-alan .qr-kart-yazi b { font-size: 1.02rem; } #qr-modal-alan .qr-kart-yazi small { font-size: .78rem; } }