* { margin:0; padding:0; box-sizing:border-box; }
:root {
    --ink: #101828;
    --ink-soft: #1D2939;
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --text: #101828;
    --muted: #667085;
    --border: #E4E7EC;
    --success-bg: #ECFDF3;
    --success-border: #A6F4C5;
    --success-text: #067647;
    --danger-bg: #FEF3F2;
    --danger-border: #FECDCA;
    --danger-text: #B42318;
    --warn-bg: #FFFAEB;
    --warn-text: #B54708;
    --scan-accent: #3B82F6;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
}
html.capture-mode, body.capture-mode { height:100%; overflow:hidden; }
body.capture-mode { background: var(--bg); }

/* ── Yükleme ekranı ───────────────────────────────────────────── */
.loading-screen {
    position:fixed; inset:0; z-index:100;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
    background: var(--bg);
    transition: opacity .35s ease;
}
.loading-screen.fade-out { opacity:0; pointer-events:none; }
.loading-logo {
    height:44px;
    /* logo dosyası açık gri/metalik tonlarda (beyaz zemin için tasarlanmamış) --
       brightness(0) alfa kanalını koruyarak siluetini tam siyaha çeviriyor, açık
       zeminde net okunur hale geliyor (bkz. proje sohbeti, kullanıcı isteği). */
    filter: brightness(0);
    opacity: .88;
}
.loading-ring {
    width:32px; height:32px; border-radius:50%;
    border:3px solid var(--border); border-top-color: var(--ink);
    animation: spin .85s cubic-bezier(.5,0,.5,1) infinite;
}
.loading-text { font-size:13px; font-weight:600; color: var(--muted); letter-spacing:.2px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Üst bar ──────────────────────────────────────────────────── */
.logo-bar {
    height:52px; display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; background: var(--surface); border-bottom:1px solid var(--border);
}
.logo-bar img {
    height:22px;
    /* logo açık renkli -- beyaz header'da görünür olsun diye karartılıyor (loading-logo
       ile aynı gerekçe). */
    filter: brightness(0);
    opacity: .85;
}
.logo-bar .right-icons { display:flex; gap:8px; align-items:center; }

/* ── Kamera alanı ─────────────────────────────────────────────── */
.camera-container {
    position:relative; width:100vw; height:calc(100vh - 52px);
    overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center;
}
.camera-container.hidden { display:none; }
video { width:100%; display:block; }
canvas { position:absolute; top:0; left:0; width:100%; height:100%; display:none; z-index:5; }
#canvas { object-fit:contain; background:#000; }

.camera-container.analyzing .align-guide,
.camera-container.analyzing #qrOverlay,
.camera-container.analyzing .status-pill { display:none; }

.scan-area { position:absolute; overflow:hidden; }
#scan-line-wrap { position:absolute; left:0; top:0; width:100%; height:0; animation:scanLine 1.8s linear infinite; }
.scan-cloud {
    position:absolute; left:0; top:-140px; width:100%; height:140px;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 100%);
}
.scan-line {
    position:absolute; top:0; left:0; width:100%; height:2px;
    background: var(--scan-accent); border-radius:2px; box-shadow:0 0 14px 3px rgba(59,130,246,.75);
}
@keyframes scanLine {
    0%   { top:0;   opacity:0; }
    15%  { opacity:1; }
    85%  { opacity:1; }
    100% { top:99%; opacity:0; }
}

#qrOverlay { position:absolute; display:block; pointer-events:none; z-index:6; }

.align-guide {
    position:absolute; top:46%; left:50%; width:320px; aspect-ratio:1/1;
    transform:translate(-50%,-50%); pointer-events:none; z-index:6;
    border:2px solid var(--scan-accent); border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.78);
}
.align-guide.ready { border-color:#22C55E; }

.loader { position:absolute; inset:0; display:none; z-index:10; overflow:hidden; }
.loader .loader-text {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
    background:rgba(16,24,40,.82); backdrop-filter:blur(8px);
    padding:10px 18px; border-radius:10px; display:flex; align-items:center; gap:10px;
}
.loader .spinner {
    width:18px; height:18px; flex-shrink:0;
    border:2.5px solid rgba(255,255,255,.2); border-top-color: #fff;
    border-radius:50%; animation:spin .85s linear infinite;
}
.loader p { color:#fff; font-size:13px; font-weight:600; margin:0; }

.status-pill {
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    background:rgba(16,24,40,.82); backdrop-filter:blur(8px);
    padding:9px 18px; border-radius:10px; font-size:13px; font-weight:600; color:#fff;
    z-index:7; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis;
    text-align:center; border:1px solid rgba(255,255,255,.08);
}
.status-pill.warn { background:rgba(181,71,8,.85); }
.status-pill.bad  { background:rgba(180,35,24,.88); }
.status-pill.ok   { background:rgba(6,118,71,.88); }

.icon-btn {
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    --icon-btn-bg: var(--bg);
    background: var(--icon-btn-bg); border:1px solid var(--border);
    color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn.active { --icon-btn-bg: #F59E0B; border-color:#F59E0B; color:#101828; }
.icon-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── Sonuç paneli ─────────────────────────────────────────────── */
.result-panel {
    display:none; height:calc(100vh - 52px); overflow-y:auto;
    padding:24px 20px; background: var(--bg);
    align-items:center; justify-content:center;
    transition: background-color 1.4s ease;
}
.result-panel.show { display:flex; }
/* 2026-08-24 (kullanıcı isteği): sonuç geldiğinde arka plan yavaşça yeşile/kırmızıya
   dönüyor -- panel display:flex olduğu anda bu sınıflar da eklenir, background-color
   transition'ı devreye girer. */
.result-panel.original { background: #D1FAE5; }
.result-panel.copy      { background: #FECACA; }
/* 2026-08-25 (kullanıcı isteği): QR içeriği "seqr.tr" içermiyorsa (geçersiz/alakasız QR)
   sarı -- ne "doğrulandı" (yeşil) ne "doğrulanamadı" (kırmızı), taranan şey seQR
   etiketi bile değil demek. */
.result-panel.invalid-qr { background: var(--warn-bg); }
.result-card {
    background: var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:40px 30px; max-width:380px; width:100%; margin:0 auto; text-align:center;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px rgba(16,24,40,.08);
}
.result-icon {
    width:64px; height:64px; border-radius:50%; margin:0 auto;
    display:flex; align-items:center; justify-content:center; border:1px solid;
}
.result-icon.original { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.result-icon.copy      { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.result-icon.invalid-qr { background: var(--warn-bg); border-color: var(--warn-text); color: var(--warn-text); }
.result-title { font-size:20px; font-weight:700; color: var(--text); margin:18px 0 6px; letter-spacing:-.2px; }
.result-sub   { font-size:14px; color: var(--muted); line-height:1.55; margin-bottom:30px; }

.btn-primary {
    width:100%; padding:14px; border:none; border-radius:11px;
    background: var(--ink); color:#fff; font-size:15px; font-weight:600; letter-spacing:.1px;
    cursor:pointer; box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 20px rgba(16,24,40,.14);
    transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover { background: var(--ink-soft); }
.btn-primary:active { transform: translateY(1px); }

/* ── Engelleyici mesaj paneli ─────────────────────────────────── */
.msg-panel {
    display:none; align-items:center; justify-content:center;
    position:fixed; inset:0; top:52px; background: var(--bg); z-index:20; padding:20px;
}
.msg-card {
    background: var(--surface); border:1px solid var(--border); border-radius:20px;
    padding:36px 28px; max-width:360px; width:100%; text-align:center;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px rgba(16,24,40,.08);
}
/* YKVHV (LOW_CONFIDENCE) -- FOCUS_ERROR/QR_NOT_FOUND gibi gerçek hatalardan (nötr/beyaz
   kart) ayırt etmek için sarı tonlanmış kart (2026-08-25, kullanıcı isteği: admin
   panelinde yapılan aynı ayrım burada da olsun). */
.msg-card.low-confidence {
    background: var(--warn-bg); border-color: var(--warn-text);
}
.msg-icon {
    width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
    background: var(--warn-bg); color: var(--warn-text);
    display:flex; align-items:center; justify-content:center;
}
.msg-card p { font-size:15px; font-weight:600; color: var(--text); line-height:1.5; margin-bottom:26px; }
.msg-card button {
    width:100%; padding:14px; border:none; border-radius:11px;
    background: var(--ink); color:#fff; font-size:15px; font-weight:600; cursor:pointer;
    box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 20px rgba(16,24,40,.14);
}
.msg-card button:hover { background: var(--ink-soft); }