/* ================= NFC Yönetim Sistemi — Ortak Stil ================= */
:root{
    --bg-1:#0f172a;
    --bg-2:#1e293b;
    --accent:#6366f1;
    --accent-2:#8b5cf6;
    --accent-hover:#4f46e5;
    --green:#22c55e;
    --green-hover:#16a34a;
    --red:#ef4444;
    --red-bg:#fef2f2;
    --red-text:#b91c1c;
    --ok-bg:#f0fdf4;
    --ok-text:#15803d;
    --text-dark:#111827;
    --text-muted:#6b7280;
    --border:#e5e7eb;
    --radius:16px;
}

*{box-sizing:border-box;}

body{
    margin:0;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
    background:radial-gradient(circle at 20% 0%, #312e81 0%, var(--bg-1) 45%, #020617 100%);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:32px 16px;
    color:var(--text-dark);
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:28px;
    color:#f8fafc;
    font-weight:700;
    font-size:17px;
    letter-spacing:.2px;
}
.brand .logo{
    width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    display:flex;align-items:center;justify-content:center;
    font-size:16px;box-shadow:0 4px 14px rgba(99,102,241,.45);
}

.card{
    background:#fff;
    padding:36px 32px;
    border-radius:var(--radius);
    max-width:420px;
    width:100%;
    box-shadow:0 20px 45px -12px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.6);
}
.card.wide{max-width:760px;}

h1{font-size:21px;margin:0 0 6px;color:var(--text-dark);font-weight:700;}
h1 .sub{display:block;font-size:13px;font-weight:400;color:var(--text-muted);margin-top:4px;}
p{color:var(--text-muted);font-size:14px;line-height:1.55;}

label{display:block;margin:14px 0 6px;font-size:13px;font-weight:600;color:#374151;}
input[type=text],input[type=email],input[type=password],input[type=url]{
    width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;
    box-sizing:border-box;font-size:14px;transition:border-color .15s,box-shadow .15s;
    background:#f9fafb;
}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.15);background:#fff;}

button, .btn{
    margin-top:22px;width:100%;padding:12px 16px;border:none;border-radius:10px;
    font-size:14.5px;font-weight:600;cursor:pointer;transition:transform .06s ease, filter .15s;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
}
button:active,.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 18px -6px rgba(99,102,241,.55);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-green{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 8px 18px -6px rgba(34,197,94,.5);}
.btn-green:hover{filter:brightness(1.05);}
.btn-outline{background:#fff;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none;}
.btn-outline:hover{background:#eef2ff;}
.btn-warn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 6px 14px -6px rgba(245,158,11,.5);}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid #fecaca;box-shadow:none;}
.btn-danger:hover{background:var(--red-bg);}
button:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed;box-shadow:none;filter:none;}

.err{background:var(--red-bg);color:var(--red-text);padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13.5px;border:1px solid #fecaca;}
.ok{background:var(--ok-bg);color:var(--ok-text);padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13.5px;border:1px solid #bbf7d0;}
.hint{background:#eff6ff;color:#1e40af;padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;border:1px solid #bfdbfe;}
.status{background:#fefce8;color:#854d0e;padding:12px 14px;border-radius:10px;margin:14px 0;font-size:13.5px;display:none;border:1px solid #fef08a;}

a{color:var(--accent);text-decoration:none;font-weight:500;}
a:hover{text-decoration:underline;}
hr{border:none;border-top:1px solid var(--border);margin:26px 0;}
code{background:#f1f5f9;padding:3px 7px;border-radius:6px;font-size:12.5px;color:#334155;}

.footer-links{margin-top:18px;font-size:13.5px;text-align:center;color:var(--text-muted);}
.muted-link{color:var(--text-muted);font-weight:500;font-size:13px;}

.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.topbar h1{margin:0;}
a.logout{color:var(--red);font-size:13.5px;font-weight:600;}

.card-box{background:#fff;border-radius:14px;padding:20px 22px;margin-bottom:16px;box-shadow:0 8px 24px -10px rgba(0,0,0,.15);border:1px solid var(--border);}
.card-uid{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:8px;font-family:'SFMono-Regular',Consolas,monospace;letter-spacing:.3px;}
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.3px;}
.pill.active{background:#dcfce7;color:#166534;}
.pill.inactive{background:#fee2e2;color:#b91c1c;}
.url-line{color:#4b5563;font-size:13.5px;margin:10px 0 4px;word-break:break-all;}
.empty{color:#94a3b8;text-align:center;padding:48px 12px;font-size:14px;}
details summary{cursor:pointer;color:var(--accent);font-size:13.5px;font-weight:600;list-style:none;}
details summary::-webkit-details-marker{display:none;}
details summary:before{content:'⚙ ';}
form.inline{margin-top:12px;display:flex;flex-direction:column;gap:8px;}

.toggle-manual{background:none;color:var(--accent);border:none;text-decoration:underline;font-size:13px;padding:0;margin-top:22px;cursor:pointer;font-weight:600;}
#manualForm{display:none;}

.otp-input{width:100%;padding:14px;border:1.5px solid var(--border);border-radius:10px;box-sizing:border-box;
    text-align:center;font-size:26px;letter-spacing:9px;margin-top:6px;font-weight:700;background:#f9fafb;}

.empty-icon{font-size:34px;margin-bottom:10px;}

/* ================= Genel sıkışıklık / taşma düzeltmeleri ================= */
/* Uzun kelimeler (uzun URL, e-posta, kart adı vb.) satırı taşırıp diğer
   metinlerin üstüne binmesin diye her yerde satır kırma açık. */
h1, p, .card-uid, .url-line, .navbar-title, .stat-row, label, .empty, a, span, div{
    overflow-wrap:anywhere;
}
.card-uid .card-name-display{overflow-wrap:anywhere;}

/* ================= Üst çubuk (sade başlık + hamburger düğmesi) ================= */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}
.navbar-title{font-size:15px;color:var(--text-dark);}
.navbar-title strong{font-weight:700;}

.hamburger-btn{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
    background:#fff;cursor:pointer;flex:0 0 auto;
}
.hamburger-btn span{display:block;width:18px;height:2px;background:#334155;margin:0 auto;border-radius:2px;}
.hamburger-btn:hover{background:#f8fafc;}

.hamburger-overlay{
    position:fixed;inset:0;background:rgba(15,23,42,.35);
    opacity:0;pointer-events:none;transition:opacity .18s;z-index:40;
}
.hamburger-overlay.open{opacity:1;pointer-events:auto;}

.hamburger-menu{
    position:fixed;top:0;right:0;height:100%;width:270px;max-width:82vw;
    background:#fff;box-shadow:-8px 0 28px -10px rgba(0,0,0,.25);
    transform:translateX(100%);transition:transform .2s ease;
    z-index:50;display:flex;flex-direction:column;
}
.hamburger-menu.open{transform:translateX(0);}
.hamburger-menu-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 18px 14px;border-bottom:1px solid var(--border);
}
.hamburger-close{background:none;border:none;font-size:18px;color:#94a3b8;cursor:pointer;padding:4px;}
.hamburger-menu-links{display:flex;flex-direction:column;padding:10px;gap:2px;flex:1;}
.hamburger-menu-foot{padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}

.navlink{
    display:flex;align-items:center;gap:10px;
    padding:12px 12px;border-radius:9px;font-size:14px;font-weight:600;
    color:#475569;text-decoration:none;white-space:nowrap;
}
.navlink:hover{background:#f1f5f9;text-decoration:none;}
.navlink-active{background:#eef2ff;color:var(--accent-hover);}
.navlink-icon{font-size:16px;width:20px;text-align:center;}
.navlink-logout{color:var(--red);}
.navlink-logout:hover{background:var(--red-bg);}

/* ================= Grup Klasörleri (panel.php) ================= */
.group-folder{
    border:1px solid var(--border);border-radius:14px;margin-bottom:14px;
    background:#fafbff;overflow:hidden;
}
.group-folder > summary{
    list-style:none;cursor:pointer;padding:16px 18px;
    display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.group-folder > summary::-webkit-details-marker{display:none;}
.group-folder > summary::after{content:'▾';color:#94a3b8;font-size:13px;margin-left:auto;}
.group-folder[open] > summary::after{content:'▴';}
.group-folder-title{font-size:14.5px;font-weight:700;color:var(--text-dark);}
.group-folder-count{font-size:12px;font-weight:600;color:#94a3b8;margin-left:4px;}
.group-folder-stats{font-size:12.5px;color:#64748b;}
.group-folder-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px;}
.group-folder > .card-box{margin:0 14px 14px;}
.group-folder > .card-box:last-child{margin-bottom:14px;}

/* ================= Dil değiştirici ================= */
.lang-switch{
    display:inline-flex;align-items:center;gap:4px;
    font-size:12.5px;font-weight:700;color:#94a3b8;
    padding:6px 10px;border-radius:8px;background:#f8fafc;
    border:1px solid var(--border);margin-left:2px;
}
.lang-switch a{color:#94a3b8;text-decoration:none;padding:1px 3px;}
.lang-switch a.lang-active{color:var(--accent-hover);}
.lang-switch a:hover{text-decoration:none;color:var(--accent-hover);}
.lang-sep{color:#cbd5e1;}

/* ================= Kart / grup sürükle-bırak (cards.php) ================= */
.dragcard{
    background:#fff;border:1px solid var(--border);border-radius:12px;
    padding:12px 14px;margin-bottom:10px;cursor:grab;font-size:13.5px;
    box-shadow:0 4px 10px -6px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.dragcard:active{cursor:grabbing;}
.dragcard.dragging{opacity:.4;}
.drop-zone{
    border:2px dashed var(--border);border-radius:14px;padding:14px;
    margin-bottom:18px;min-height:70px;transition:border-color .15s,background .15s;
}
.drop-zone.drop-hover{border-color:var(--accent);background:#eef2ff;}
.drop-zone-title{font-size:13.5px;font-weight:700;color:var(--text-dark);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.drop-zone-empty{font-size:12.5px;color:#94a3b8;text-align:center;padding:14px 6px;}

@media (max-width:480px){
    .card{padding:26px 20px;}
}