/* ===== (A) Layout Shell ===== */
:root{
  --bg:#f7f8fb; --card:#ffffff; --muted:#6b7280; --text:#111827;
  --brand:#3b82f6; --brand2:#8b5cf6; --green:#16a34a; --amber:#f59e0b; --red:#ef4444; --gray:#9ca3af;
  --border:#e5e7eb; --shadow:0 12px 30px rgba(17,24,39,.08);
  --radius:14px; --radius-sm:10px; --space:16px; --space-lg:24px;
  --font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font)}
a{color:#2563eb;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* Sidebar / Header / Main */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:220px;
  background:#fff; border-right:1px solid var(--border); padding:16px; box-shadow:var(--shadow);
}
.sidebar .brand{font-weight:800; letter-spacing:.2px; color:#111827; margin:4px 0 12px}
.sidebar nav .nav-item{display:block; padding:10px 12px; border-radius:10px; color:var(--text)}
.sidebar nav .nav-item:hover{background:#f3f4f6}

.header{
  position:sticky; top:0; height:56px; background:#fff; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 16px;
  margin-left:220px; z-index:100;
}
.header .page-title{font-weight:700}
.header .user{color:#374151; margin-right:8px}
.btn.btn-link{color:#2563eb; text-decoration:none; padding:6px 10px; border-radius:8px}
.btn.btn-link:hover{background:#f3f4f6}

.main{padding:24px; margin-left:260px}
.burger{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; cursor:pointer;
}
.burger:hover{ background:#f3f4f6 }


@media (max-width:900px){
  .header{margin-left:0}
  .main{margin-left:0}
  .sidebar{transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 12px 30px rgba(17,24,39,.16)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .burger{display:inline-block}
}

/* ===== (B) Ortak Bileşenler ===== */
.container{max-width:1200px;margin:0 auto;padding:0 var(--space)}
.page{padding:var(--space-lg) 0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-lg)}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:#fff;color:#374151;font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 8px 20px rgba(59,130,246,.25)}
.btn-primary:hover{filter:brightness(1.03)}
.btn-secondary{background:#fff;color:#374151;border-color:var(--border)}
.btn-secondary:hover{background:#f3f4f6}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.input,.select,.textarea{width:100%;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 12px;color:var(--text);font-size:14px}
.table-responsive{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
table.table{width:100%;border-collapse:collapse;min-width:760px}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left;vertical-align:middle}
.table th{font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.02em;background:#fafafa}
.thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#f3f4f6}
.status-pending{color:var(--gray)} .status-queued{color:#8a6d3b} .status-synced{color:var(--green)} .status-error{color:#b91c1c}

/* Mevcut görünümlerle uyum (class isimleri değişmeden) */
.products-wrap{padding:var(--space)}
.products thead th{background:#fafafa;text-transform:uppercase;letter-spacing:.02em;font-size:12px;color:#666}
.products td,.products th{border-bottom:1px solid var(--border);padding:10px 8px}

/* ===== (C) Parola Sayfası (pw-*) ===== */
.pw-wrap{
  min-height:calc(100dvh - 56px); display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, #eaf2ff 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #f3e8ff 0%, transparent 55%),
    var(--bg);
}
.pw-card{ width:min(560px,92vw); background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow) }
.pw-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px }
.pw-title{ margin:0; font-size:20px; font-weight:700; letter-spacing:.2px }
.pw-meta{ font-size:12px; color:var(--muted) }
.pw-error{ background:#fff5f5; border:1px solid #fecaca; color:#991b1b; padding:10px 12px; border-radius:10px; margin-bottom:12px }
.pw-row{ margin-bottom:14px }
.pw-label{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12px; color:var(--muted) }
.pw-input{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px }
.pw-input input{ width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:14px }
.pw-toggle{ cursor:pointer; border:1px solid var(--border); background:#f9fafb; color:#374151; padding:6px 10px; border-radius:8px; font-size:12px }
.pw-toggle:hover{ background:#eef2f7 }
.pw-help{ font-size:12px; color:var(--muted); margin-top:6px }
.pw-strength{ height:8px; background:#f3f4f6; border:1px solid var(--border); border-radius:999px; overflow:hidden }
.pw-bar{ height:100%; width:0% }
.pw-actions{ display:flex; gap:10px; align-items:center; margin-top:6px }

/* Buton temel */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; font-weight:600; letter-spacing:.2px; text-decoration:none;
}
.btn-primary{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; box-shadow:0 8px 20px rgba(59,130,246,.25) }
.btn-primary:hover{ filter:brightness(1.03) }

.btn-secondary{ background:#fff; color:#374151; border-color:var(--border) }
.btn-secondary:hover{ background:#f3f4f6 }

.btn-light{ background:#f9fafb; color:#374151; border:1px solid var(--border) }
.btn-light:hover{ background:#eef2f7 }

.btn-link{ background:transparent; color:#2563eb; border:1px solid transparent; padding:6px 10px; border-radius:10px }
.btn-link:hover{ background:#eef2ff }

.btn-sm{ padding:6px 10px; border-radius:10px; font-size:12px; }

/* Password sayfasındaki küçük "Göster" butonunu hizala */
.pw-toggle{ all:unset; }
.pw-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; border-radius:10px; font-size:12px;
  background:#f9fafb; color:#374151; border:1px solid var(--border); cursor:pointer;
}
.pw-toggle:hover{ background:#eef2f7 }