/* QR ile web girişi (2026-11-06) — ortak bileşen: firmanın giriş sayfası (/giris-yap) + santiyeplus.com/panel-giris.
   İşaretlemeyi global/js/qr-giris.js kurar. Renkler Bootstrap değişkenlerinden (koyu temada da okunur);
   kare kodun kendisi her zaman beyaz kart üzerinde — telefon kamerası koyu zeminde okuyamaz.
   Süre göstergesi QR kartının ÇERÇEVESİDİR (yuvarlak halka değil): üst ortadan başlar, saat yönünde akıcı biçimde geri çekilir
   (requestAnimationFrame — saniye saniye atlamaz). QR üzerinde soldan sağa giden ince tarama çizgisi "bekliyor" durumunu anlatır. */

.qrg {
    --qrg-mavi: #2563eb;
    --qrg-turuncu: #f59e0b;
    --qrg-yesil: #16a34a;
    --qrg-kirmizi: #dc2626;
    --qrg-metin: var(--bs-body-color, #0f172a);
    --qrg-soluk: var(--bs-secondary-color, #64748b);
    --qrg-cizgi: var(--bs-border-color, #e2e8f0);
    --qrg-zemin: var(--bs-tertiary-bg, #f8fafc);
    text-align: center;
    color: var(--qrg-metin);
}

.qrg-baslik { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.qrg-alt { font-size: .85rem; color: var(--qrg-soluk); margin: 0 auto 16px; max-width: 330px; line-height: 1.45; }

/* Sahne: kare kart + kartı saran süre çerçevesi (SVG, aynı köşe yuvarlaklığı) */
.qrg-sahne { position: relative; width: 248px; height: 248px; margin: 0 auto; }
.qrg-cerceve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qrg-cerceve path { fill: none; stroke-width: 4; }
.qrg-cerceve .qrg-cerceve-iz { stroke: var(--qrg-cizgi); }
.qrg-cerceve .qrg-cerceve-dolu { stroke: var(--qrg-mavi); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke .4s; }
.qrg[data-uyari="1"] .qrg-cerceve .qrg-cerceve-dolu { stroke: var(--qrg-turuncu); }
.qrg[data-durum="onaylandi"] .qrg-cerceve .qrg-cerceve-dolu { stroke: var(--qrg-yesil); stroke-dashoffset: 0 !important; }
.qrg[data-durum="suresi-doldu"] .qrg-cerceve .qrg-cerceve-dolu,
.qrg[data-durum="hata"] .qrg-cerceve .qrg-cerceve-dolu,
.qrg[data-durum="yukleniyor"] .qrg-cerceve .qrg-cerceve-dolu { opacity: 0; }

.qrg-kart {
    position: absolute; inset: 12px; background: #fff; border-radius: 18px; padding: 10px; overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .10);
}
.qrg-kod, .qrg-kod svg { display: block; width: 100%; height: 100%; }

/* Tarama çizgisi: QR'ın üzerinde soldan sağa, sağdan sola gidip gelir (yalnız "bekliyor") */
.qrg-tarama {
    position: absolute; top: 8%; bottom: 8%; left: 6%; width: 3px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0) 0%, var(--qrg-mavi) 18%, var(--qrg-mavi) 82%, rgba(37, 99, 235, 0) 100%);
    box-shadow: 0 0 10px 2px rgba(37, 99, 235, .35);
    opacity: 0;
}
.qrg[data-durum="bekliyor"] .qrg-tarama { opacity: .55; animation: qrg-tara 2.6s ease-in-out infinite alternate; }
@keyframes qrg-tara {
    from { left: 6%; }
    to { left: calc(94% - 3px); }
}

.qrg-logo {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
    background: #fff; border-radius: 12px; padding: 6px; box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(15, 23, 42, .18);
    display: flex; align-items: center; justify-content: center; z-index: 1;
}
.qrg-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Kartın üstüne binen durum örtüsü (yükleniyor / telefonda onay / giriş / süre doldu) */
.qrg-ortu {
    position: absolute; inset: 0; border-radius: 18px; background: rgba(255, 255, 255, .93); color: #0f172a; z-index: 2;
    display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
    font-size: .85rem; font-weight: 600; line-height: 1.35;
}
.qrg-ortu.acik { display: flex; }
.qrg-ortu-ikon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: var(--qrg-mavi); }
.qrg-ortu-ikon.yesil { background: var(--qrg-yesil); }
.qrg-ortu-ikon.gri { background: #94a3b8; }
.qrg-ortu button {
    border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: .82rem; color: #fff; background: var(--qrg-mavi); cursor: pointer;
    width: auto; margin: 0; line-height: 1.4;
}
.qrg-ortu button:hover { filter: brightness(1.08); }
.qrg-donen { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #cbd5e1; border-top-color: var(--qrg-mavi); animation: qrg-don .8s linear infinite; }
@keyframes qrg-don { to { transform: rotate(360deg); } }

.qrg-sayac { font-size: .78rem; color: var(--qrg-soluk); margin: 12px 0 12px; min-height: 1.2em; }
.qrg-sayac b { color: var(--qrg-metin); font-variant-numeric: tabular-nums; }

.qrg-durum {
    display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 14px; border-radius: 12px;
    border: 1px solid var(--qrg-cizgi); background: var(--qrg-zemin); font-weight: 600; font-size: .88rem;
}
.qrg-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--qrg-turuncu); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); animation: qrg-nabiz 1.6s infinite; }
.qrg[data-durum="okundu"] .qrg-nokta { background: var(--qrg-mavi); box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); }
.qrg[data-durum="onaylandi"] .qrg-nokta { background: var(--qrg-yesil); animation: none; }
.qrg[data-durum="hata"] .qrg-nokta, .qrg[data-durum="reddedildi"] .qrg-nokta { background: var(--qrg-kirmizi); animation: none; }
.qrg[data-durum="suresi-doldu"] .qrg-nokta { background: #94a3b8; animation: none; }
@keyframes qrg-nabiz {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .5); }
    70% { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* İsteğe bağlı 3 adım (data-adimlar="1") */
.qrg-adimlar { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; display: grid; gap: 8px; }
.qrg-adimlar li { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--qrg-soluk); line-height: 1.4; }
.qrg-adimlar li b { color: var(--qrg-metin); font-weight: 700; }
.qrg-adim-no {
    flex: 0 0 22px; height: 22px; border-radius: 7px; background: rgba(37, 99, 235, .1); color: var(--qrg-mavi);
    font-weight: 700; font-size: .75rem; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 380px) {
    .qrg-sahne { width: 224px; height: 224px; }
}

@media (prefers-reduced-motion: reduce) {
    .qrg-nokta, .qrg-donen { animation: none; }
    .qrg[data-durum="bekliyor"] .qrg-tarama { animation: none; opacity: 0; }
}