:root {
  --guras-950: #10283d;
  --guras-900: #17344f;
  --guras-800: #214968;
  --guras-700: #2f668d;
  --guras-600: #3c7da8;
  --guras-100: #dceaf3;
  --guras-50: #f2f7fa;
  --ink: #182936;
  --ink-soft: #536674;
  --line: #d5e0e7;
  --canvas: #edf3f6;
  --paper: #ffffff;
  --positive: #167252;
  --positive-soft: #e3f3ec;
  --caution: #9a6311;
  --caution-soft: #fbf0db;
  --critical: #aa3b41;
  --critical-soft: #f9e9e9;
  --font-corporate: 'Manrope', 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { overflow-x: hidden; }

::selection { background: #bfd9ea; color: var(--guras-950); }

body { font-family: var(--font-corporate) !important; }

button, input, select, textarea { font: inherit; }

a, button, input, [tabindex] { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(60, 125, 168, .34);
  outline-offset: 3px;
}

/* Personel girişi */
body.employee-login {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 100vh;
  overflow: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr);
  gap: clamp(48px, 9vw, 140px);
  align-items: center;
  padding: 56px clamp(28px, 8vw, 130px);
  background: var(--canvas);
  color: var(--ink);
}

body.employee-login::before {
  inset: 0 auto 0 0;
  width: 43%;
  height: 100%;
  background: var(--guras-950);
  border-radius: 0;
}

body.employee-login::after {
  width: 22vw;
  height: 22vw;
  min-width: 220px;
  min-height: 220px;
  right: -9vw;
  bottom: -10vw;
  background: #d9e8f0;
  border-radius: 50%;
  opacity: .65;
}

.employee-login .brand {
  position: relative;
  z-index: 1;
  align-self: center;
  text-align: left;
  margin: 0;
  max-width: 390px;
  background: var(--guras-950);
}

.employee-login .brand-logo {
  width: min(275px, 78vw);
  margin: 0 0 30px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

.employee-login .brand p {
  max-width: 28ch;
  margin: 0;
  color: #d8e5ed;
  font-size: clamp(.95rem, 1.4vw, 1.12rem);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .01em;
}

.employee-login .card {
  justify-self: start;
  width: 100%;
  max-width: 490px;
  padding: clamp(30px, 4vw, 48px);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(23, 52, 79, .1);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .13);
}

.employee-login .card-title {
  margin-bottom: 9px;
  color: var(--guras-950);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.025em;
}

.employee-login .card-subtitle {
  max-width: 46ch;
  margin-bottom: 30px;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.65;
}

.employee-login .form-group label {
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.employee-login .form-control {
  min-height: 50px;
  color: var(--ink);
  background: #f8fafb;
  border-color: #c9d6df;
  border-radius: 10px;
}

.employee-login .form-control:focus {
  background: #fff;
  border-color: var(--guras-600);
  box-shadow: 0 0 0 4px rgba(60, 125, 168, .13);
}

.employee-login .btn-login {
  min-height: 52px;
  margin-top: 6px;
  background: var(--guras-900);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .2s var(--ease-out), background .2s ease, box-shadow .2s ease;
}

.employee-login .btn-login:hover {
  background: var(--guras-800);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
}

.employee-login .error-msg {
  color: #842d33;
  background: var(--critical-soft);
  border-color: #e9bfc2;
  line-height: 1.5;
}

.employee-login .divider { border-color: var(--line); }
.employee-login .admin-link { color: var(--ink-soft); }
.employee-login .admin-link a { color: var(--guras-700); font-weight: 700; text-underline-offset: 4px; }

/* Yönetici girişi */
body.admin-login {
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
}

.admin-login .login-wrapper { min-height: 100vh; padding: 32px 20px; }

.admin-login .login-card {
  max-width: 455px;
  padding: 42px 38px;
  background: var(--paper);
  border: 1px solid rgba(23, 52, 79, .12);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .13);
}

.admin-login .login-card::before {
  content: '';
  display: block;
  width: 52px;
  height: 4px;
  margin: -42px auto 34px;
  background: var(--guras-600);
  border-radius: 0 0 4px 4px;
}

.admin-login .form-control {
  min-height: 49px;
  background: #f8fafb;
  border-color: #c9d6df;
}

.admin-login .btn-primary { min-height: 52px; background: var(--guras-900); }
.admin-login a { color: var(--guras-700); font-weight: 650; }

/* Yönetim paneli */
body.admin-panel {
  color: var(--ink);
  background: var(--canvas);
}

.admin-panel > header {
  min-height: 78px;
  padding: 14px clamp(20px, 3vw, 42px);
  background: var(--paper);
  border-color: var(--line);
}

.admin-panel .company-logo { width: 138px; }
.admin-panel .logo-text h1 { color: var(--guras-950); font-size: 1.05rem; letter-spacing: -.02em; }
.admin-panel .logo-text p { color: var(--ink-soft); }

.admin-panel .btn {
  min-height: 40px;
  border-radius: 9px;
  font-weight: 700;
  transition: transform .2s var(--ease-out), background .2s ease, border-color .2s ease;
}

.admin-panel .btn-primary { background: var(--guras-900); }
.admin-panel .btn-primary:hover { background: var(--guras-800); transform: translateY(-1px); }
.admin-panel .btn-primary, .admin-panel .btn-primary:hover { color: #fff; }
.admin-panel .btn-secondary { color: var(--guras-900); background: #f5f8fa; border-color: #cbd8e0; }
.admin-panel .btn-secondary:hover { background: #e8f0f4; }
.admin-panel .btn-danger { color: #8f3036; background: transparent; border-color: #dfb9bc; }
.admin-panel .btn-danger:hover { color: #fff; background: var(--critical); border-color: var(--critical); }
.admin-panel .btn-compact { min-height: 34px; padding: 6px 10px !important; font-size: .76rem !important; }

.admin-panel .admin-grid { grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 78px); }

.admin-panel .admin-sidebar {
  padding: 26px 18px;
  background: var(--guras-950);
  border: 0;
}

.admin-panel .sidebar-menu { gap: 6px; }
.admin-panel .sidebar-link {
  min-height: 46px;
  padding: 12px 14px;
  color: #bed0dc;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 650;
}

.admin-panel .sidebar-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.admin-panel .sidebar-link.active {
  color: #fff;
  background: rgba(105, 164, 201, .18);
  border: 0;
  box-shadow: inset 3px 0 0 #72add0;
}

.admin-panel .admin-content { padding: clamp(24px, 3vw, 44px); }
.admin-panel .admin-section { max-width: 1440px; margin: 0 auto; }
.admin-panel h2 { color: var(--guras-950); font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.025em; }
.admin-panel .section-description { margin-top: 5px; color: var(--ink-soft); font-size: .84rem; }

.admin-panel .stats-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-panel .stat-card {
  min-height: 96px;
  padding: 18px;
  gap: 14px;
  background: var(--paper);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}

.admin-panel .stat-icon {
  position: relative;
  width: 10px;
  height: 48px;
  border-radius: 4px;
  background: var(--guras-600);
}

.admin-panel .stat-present { background: var(--positive); }
.admin-panel .stat-break { background: #c18a32; }
.admin-panel .stat-complete { background: #758894; }
.admin-panel .stat-info .stat-val { color: var(--guras-950); font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.admin-panel .stat-info .stat-label { margin-top: 3px; color: var(--ink-soft); line-height: 1.35; }

.admin-panel .filter-bar {
  padding: 14px;
  gap: 12px;
  margin-bottom: 16px;
  background: rgba(255,255,255,.72);
  border-color: var(--line);
  border-radius: 12px;
}

.admin-panel .filter-group { align-items: flex-end; gap: 7px; }
.admin-panel .filter-group label { color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.admin-panel .form-control {
  color: var(--ink);
  background: #fff;
  border-color: #cbd8e0;
  border-radius: 8px;
}
.admin-panel .form-control:focus { border-color: var(--guras-600); box-shadow: 0 0 0 3px rgba(60,125,168,.13); }

.admin-panel .table-responsive {
  background: var(--paper);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
  padding: 8px;
}

.admin-panel table { font-size: .84rem; }
.admin-panel th, .admin-panel td { padding: 14px 16px; border-color: #e5edf1; }
.admin-panel th {
  color: #516674;
  background: #f4f7f9;
  font-size: .7rem;
  letter-spacing: .055em;
}
.admin-panel tr:hover td { background: #f7fafb; }
.admin-panel .table-empty { padding: 34px; text-align: center; color: var(--ink-soft); }

.admin-panel .badge { border-radius: 6px; text-transform: none; letter-spacing: 0; }
.admin-panel .badge-success { color: #125d44; background: var(--positive-soft); }
.admin-panel .badge-warning { color: #81520d; background: var(--caution-soft); }
.admin-panel .badge-error { color: #873038; background: var(--critical-soft); }

.admin-panel .action-btn {
  min-width: 48px;
  padding: 6px 8px;
  color: var(--ink-soft);
  border: 1px solid #d5e0e7;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 700;
}

.admin-panel .modal-overlay { background: rgba(10, 27, 40, .7); backdrop-filter: blur(3px); }
.admin-panel .modal-content { border: 0; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .26); }
.admin-panel .modal-header, .admin-panel .modal-footer { border-color: var(--line); }
.admin-panel .modal-footer { background: #f5f8fa; }
.admin-panel .modal-close { width: 40px; height: 40px; border-radius: 8px; }
.admin-panel .modal-close:hover { color: var(--guras-950); background: #edf3f6; }

.admin-panel .alert-toast {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}
.admin-panel #toastIcon { width: 9px; height: 9px; background: var(--guras-600); border-radius: 50%; }
.admin-panel .alert-toast.success #toastIcon { background: var(--positive); }
.admin-panel .alert-toast.error #toastIcon { background: var(--critical); }
.admin-panel .alert-toast.warning #toastIcon { background: var(--caution); }

/* Personel portalı */
body.employee-portal {
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
}

.employee-portal header {
  min-height: 72px;
  padding: 12px clamp(14px, 4vw, 28px);
  background: rgba(255,255,255,.96);
  border-color: var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
}
.employee-portal .header-logo { width: 118px; }
.employee-portal .hname { color: var(--guras-950); font-weight: 750; }
.employee-portal .hsub { color: var(--ink-soft); }
.employee-portal .btn { min-height: 38px; padding: 8px 11px; border-radius: 8px; font-weight: 700; }
.employee-portal header .btn { white-space: nowrap; }
.employee-portal .btn-ghost { color: var(--guras-700) !important; background: var(--guras-50) !important; border-color: #c4d8e5 !important; }
.employee-portal .btn-danger { color: #8a343a; background: transparent; border-color: #e2bec1; }

.employee-portal main { max-width: 570px; padding: 26px 16px 44px; gap: 14px; }
.employee-portal .status-banner {
  min-height: 82px;
  padding: 18px 20px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.employee-portal .status-banner.bekliyor { background: #e7f0f6; }
.employee-portal .status-banner.giris { background: var(--positive-soft); }
.employee-portal .status-banner.molada { background: var(--caution-soft); }
.employee-portal .status-banner.cikis { background: #e8edef; }
.employee-portal .status-icon { width: 11px; height: 42px; border-radius: 4px; background: var(--guras-600); }
.employee-portal .giris .status-icon { background: var(--positive); }
.employee-portal .molada .status-icon { background: var(--caution); }
.employee-portal .cikis .status-icon { background: #728590; }
.employee-portal .status-title { color: var(--guras-950); font-size: .98rem; font-weight: 750; }
.employee-portal .status-sub { color: #4d626f; line-height: 1.5; }

.employee-portal .card {
  padding: 20px;
  background: var(--paper);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}
.employee-portal .card-title { margin-bottom: 14px; color: var(--guras-950); font-size: .93rem; font-weight: 750; }
.employee-portal .viewport-wrap { border-radius: 10px; background: var(--guras-950); }
.employee-portal .scan-frame { border-color: #7fc0e6; border-radius: 10px; box-shadow: 0 0 0 4000px rgba(8, 24, 36, .4); }
.employee-portal .scan-hint { color: var(--ink-soft); line-height: 1.5; }

.employee-portal .stat-row { gap: 8px; }
.employee-portal .stat-pill { padding: 13px 8px; background: #f7fafb; border-color: var(--line); border-radius: 9px; }
.employee-portal .sp-val { color: var(--guras-950); font-variant-numeric: tabular-nums; }
.employee-portal .sp-lbl { color: var(--ink-soft); }

.employee-portal .tl-item { border-color: #e3ebef; }
.employee-portal .tl-dot { width: 12px; height: 34px; border-radius: 4px; background: var(--guras-600); }
.employee-portal .tl-dot.g { background: var(--positive); }
.employee-portal .tl-dot.m { background: var(--caution); }
.employee-portal .tl-dot.r { background: var(--guras-600); }
.employee-portal .tl-dot.c { background: #728590; }
.employee-portal .tl-label { color: var(--ink); }
.employee-portal .tl-time, .employee-portal .empty-tl { color: var(--ink-soft); }
.admin-panel .break-line { display: block; color: var(--ink-soft); line-height: 1.65; }

.employee-portal .action-modal { background: rgba(10, 27, 40, .72); backdrop-filter: blur(3px); }
.employee-portal .action-sheet { color: var(--ink); background: #fff; border: 0; border-radius: 18px 18px 0 0; animation-timing-function: var(--ease-out); }
.employee-portal .sheet-title { color: var(--guras-950); }
.employee-portal .sheet-sub, .employee-portal .sheet-cancel { color: var(--ink-soft); }
.employee-portal .sheet-btn { min-height: 52px; border-radius: 10px; }
.employee-portal .sheet-btn.mola { color: #754b0c; background: var(--caution-soft); border-color: #e8c88f; }
.employee-portal .sheet-btn.cikis { color: #fff; background: var(--guras-900); border-color: var(--guras-900); }

.employee-portal .result-toast {
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.employee-portal .rt-icon { display: none; }
.employee-portal .rt-type { color: var(--guras-700); }
.employee-portal .rt-time { color: var(--ink-soft); }

/* Ortak QR ekranı */
body.tablet-screen {
  color: #edf5f8;
  background: #0e2638;
  grid-template-columns: minmax(560px, 1fr) 390px;
}
.tablet-screen .left { padding: 48px; }
.tablet-screen .left::before { background: none; }
.tablet-screen .brand { top: 30px; left: 34px; }
.tablet-screen .brand-logo { width: 182px; padding: 8px 12px; background: #fff; border-radius: 9px; }
.tablet-screen .qr-card {
  gap: 17px;
  padding: 30px 38px;
  background: #17364d;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36);
}
.tablet-screen .qr-title { max-width: 34ch; font-size: 1.18rem; letter-spacing: -.02em; }
.tablet-screen .qr-subtitle { max-width: 58ch; color: #b9cad5; line-height: 1.5; }
.tablet-screen .qr-img-box { padding: 13px; border-radius: 12px; box-shadow: 0 14px 38px rgba(0, 0, 0, .28); }
.tablet-screen .progress-ring-wrap, .tablet-screen .scan-status { color: #c4d3dc; }
.tablet-screen .ring-fill { stroke: #79b9df; }
.tablet-screen .dot-pulse { background: #6fc79f; }

.tablet-screen .right {
  padding: 30px 25px;
  gap: 18px;
  background: #102d42;
  border-color: rgba(197, 218, 230, .16);
}
.tablet-screen .panel-label { color: #a9becb; letter-spacing: .08em; }
.tablet-screen .fullscreen-btn {
  min-height: 36px;
  padding: 7px 11px;
  color: #eaf3f7;
  background: transparent;
  border: 1px solid rgba(207, 225, 234, .25);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.tablet-screen .clock { text-align: left; padding: 12px 0 8px; }
.tablet-screen .clock-time {
  color: #fff;
  font-size: 2.65rem;
  letter-spacing: -.035em;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.tablet-screen .clock-date { color: #a9becb; }
.tablet-screen .scan-list { gap: 7px; }
.tablet-screen .scan-item { padding: 10px 12px; background: rgba(255,255,255,.045); border-color: rgba(197,218,230,.13); border-radius: 9px; }
.tablet-screen .stype, .tablet-screen .stime { color: #a9becb; }
.tablet-screen .result-card { border-width: 0; border-radius: 10px; }
.tablet-screen .empty-list { color: #9fb5c2; line-height: 1.6; }

@media (max-width: 1000px) {
  .admin-panel .stats-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  body.tablet-screen { grid-template-columns: minmax(440px, 1fr) 330px; }
  .tablet-screen .qr-img-box img { width: min(34vw, 330px); height: min(34vw, 330px); }
}

@media (max-width: 760px) {
  body.employee-login {
    display: flex;
    min-height: 100svh;
    gap: 26px;
    justify-content: center;
    padding: 68px 18px 28px;
    background: var(--canvas);
  }
  body.employee-login::before { width: 100%; height: 235px; }
  .employee-login .brand { align-self: stretch; text-align: center; }
  .employee-login .brand-logo { width: min(225px, 72vw); margin: 0 auto 15px; padding: 10px 14px; }
  .employee-login .brand p { margin: 0 auto; color: #d8e5ed; font-size: .88rem; }
  .employee-login .card { align-self: center; padding: 28px 22px; }

  .admin-login .login-card { padding: 38px 24px; }
  .admin-login .login-card::before { margin-top: -38px; }

  .admin-panel > header { align-items: flex-start; gap: 14px; flex-wrap: wrap; }
  .admin-panel .logo-text { display: none; }
  .admin-panel .admin-grid { grid-template-columns: 1fr; }
  .admin-panel .admin-sidebar { padding: 10px 12px; }
  .admin-panel .sidebar-menu { flex-direction: row; padding: 0; }
  .admin-panel .sidebar-link { flex: 1; justify-content: center; text-align: center; }
  .admin-panel .sidebar-link.active { box-shadow: inset 0 -3px 0 #72add0; }
  .admin-panel .admin-content { padding: 22px 14px 40px; }
  .admin-panel .admin-section > div:first-child { flex-direction: column; align-items: stretch !important; gap: 14px; }
  .admin-panel .admin-section > div:first-child .btn { align-self: flex-start; }
  .admin-panel .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-panel .stat-card { min-height: 88px; padding: 14px; }
  .admin-panel .stat-icon { height: 40px; }
  .admin-panel .filter-group { align-items: stretch; flex-direction: column; }

  .employee-portal header { align-items: flex-start; gap: 10px; }
  .employee-portal .header-logo { width: 96px; }
  .employee-portal .hsub { display: none; }
  .employee-portal .btn { min-height: 36px; padding: 7px 9px; font-size: .72rem; }
  .employee-portal main { padding-top: 18px; }

  body.tablet-screen {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    grid-template-columns: 1fr;
  }
  .tablet-screen .left { min-height: 690px; padding: 86px 22px 30px; }
  .tablet-screen .brand { top: 22px; left: 22px; }
  .tablet-screen .qr-card { width: min(100%, 480px); padding: 26px 20px; }
  .tablet-screen .qr-img-box img { width: min(68vw, 340px); height: min(68vw, 340px); }
  .tablet-screen .right { min-height: 420px; border-left: 0; border-top: 1px solid rgba(197,218,230,.16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}