/* panel404 — page-specific styles (premium v4 "VIP") */

/* ───────────────────────── Login ───────────────────────── */
.login { display: flex; min-height: 100vh; }
.login__brand {
  flex: 0 0 45%;
  background: var(--grain), var(--mesh-grad);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
}
.login__brand::before, .login__brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  background: rgba(21,126,251,.38);
}
.login__brand::before {
  width: 440px; height: 440px; top: -130px; right: -110px;
  animation: aurora1 18s ease-in-out infinite alternate;
}
.login__brand::after {
  width: 380px; height: 380px; bottom: -90px; left: -130px; opacity: .6;
  background: rgba(56,189,248,.32);
  animation: aurora2 24s ease-in-out -8s infinite alternate;
}
@keyframes aurora1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-70px, 60px) scale(1.25); }
}
@keyframes aurora2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(80px, -50px) scale(1.15); }
}
.login__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 480px; height: 480px;
  opacity: .06;
  pointer-events: none;
  animation: watermarkSpin 240s linear infinite;
}
@keyframes watermarkSpin {
  from { transform: translate(-50%, -55%) rotate(0deg); }
  to   { transform: translate(-50%, -55%) rotate(360deg); }
}
.login__tagline {
  position: relative; color: #fff;
  font-size: 26px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1.32; max-width: 420px;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(2,10,28,.4);
}
.login__features { position: relative; margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.login__feature { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 14px; }
.login__feature .icon { color: var(--blue-300); filter: drop-shadow(0 0 8px rgba(147,197,253,.5)); }

.login__panel {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  background:
    var(--grain),
    radial-gradient(700px 480px at 85% 8%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 65%),
    radial-gradient(600px 400px at 10% 100%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 60%),
    var(--bg-page);
  padding: 40px 24px;
}
.login__box {
  width: 452px; max-width: 100%;
  position: relative;
  background: color-mix(in srgb, var(--bg-surface) 82%, transparent);
  -webkit-backdrop-filter: var(--blur-3);
          backdrop-filter: var(--blur-3);
  border-radius: var(--r-2xl);
  padding: 42px;
  box-shadow: var(--shadow-xl), var(--edge-top);
}
/* Yavaşça dönen gradyan kenarlık (destek yoksa sabit gradyan kalır).
   @property --angle kaydı artık tokens.css'te. */
.login__box::before {
  content: '';
  --angle: 0deg;
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle),
              rgba(21,126,251,.10) 0deg, rgba(21,126,251,.55) 70deg,
              rgba(147,197,253,.75) 105deg, rgba(21,126,251,.55) 140deg,
              rgba(21,126,251,.10) 210deg, rgba(11,103,222,.45) 300deg,
              rgba(21,126,251,.10) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: borderSpin 12s linear infinite;
}
@keyframes borderSpin { to { --angle: 360deg; } }

/* Alanlar kademeli belirir */
.login__box > * { animation: riseIn .6s var(--ease-emphasized) backwards; }
.login__box > *:nth-child(2) { animation-delay: 70ms; }
.login__box > *:nth-child(3) { animation-delay: 120ms; }
.login__box > *:nth-child(4) { animation-delay: 170ms; }
.login__box > *:nth-child(5) { animation-delay: 230ms; }
.login__box form > * { animation: riseIn .55s var(--ease-emphasized) backwards; animation-delay: 200ms; }
.login__box form > *:nth-child(3) { animation-delay: 250ms; }
.login__box form > *:nth-child(4) { animation-delay: 300ms; }
.login__box form > *:nth-child(5) { animation-delay: 350ms; }

.login__logo { width: 48px; height: 48px; margin-bottom: 24px; filter: drop-shadow(0 4px 18px rgba(21,126,251,.55)); }
.login__title { font-size: 30px; font-weight: var(--fw-display); color: var(--text-heading); letter-spacing: var(--tracking-tighter); line-height: 1.15; }
.login__sub { color: var(--gray-500); font-size: var(--fs-base); margin: 8px 0 28px; }
.login__row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
/* --gray-400 acik temada 2.5:1 kaliyordu; bir kademe koyu ton okunurlugu duzeltir */
.login__footer { margin-top: 40px; font-size: var(--fs-xs); color: var(--gray-500); text-align: center; }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 44px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.password-toggle:hover { color: var(--gray-700); background: var(--bg-inset); }

@media (max-width: 1023px) {
  .login__brand { display: none; }
}

/* ─────────────────────── Auth layout (basit ortalanmis) ─────────────────────── */
.auth-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 440px; max-width: 100%;
  background: var(--surface-sheen), var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg), var(--edge-top);
  padding: 40px;
}

/* NOT: Dashboard bilesenleri dashboard.css'e, grafik sarmalayicilari
   charts.css'e tasindi. Ikisi de  ile sayfa bazinda yuklenir. */

/* ─────────────────── Teklif olusturucu (satirlar) ─────────────────── */
.quote-items { width: 100%; }
.quote-items th {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--gray-500);
  text-align: left; padding: 0 8px 8px 0;
  letter-spacing: var(--tracking-wide);
}
.quote-items td { padding: 0 8px 10px 0; vertical-align: top; }
.quote-item-row .input { height: 38px; }
.quote-item-total {
  height: 38px;
  display: flex; align-items: center; justify-content: flex-end;
  font-weight: var(--fw-semi); color: var(--gray-800);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-base);
  white-space: nowrap;
}
.quote-add-row {
  width: 100%;
  padding: 11px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--gray-500);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--t-base) var(--ease);
}
.quote-add-row:hover { border-color: var(--primary); color: var(--blue-600); background: var(--blue-50); }

/* Cam ada viewport'un --shell-gap kadar altında duruyor; ham --topbar-h
   kullanılırsa yapışkan özet tam o kadar yukarıda kalıp adanın altına
   giriyor. Hesap YERİNDE yapılıyor (türetilmiş token :root'ta çözülüp
   kırılım override'larını kaçırırdı — bkz. layout.css .main notu). */
.quote-summary { position: sticky; top: calc(var(--shell-gap) + var(--topbar-h) + 24px); }
.quote-summary__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  font-size: var(--fs-base);
  color: var(--gray-600);
}
.quote-summary__row strong { color: var(--gray-800); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }
.quote-summary__grand {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 8px; padding-top: 15px;
}
.quote-summary__grand-label { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-heading); }
.quote-summary__grand-value {
  font-size: 25px; font-weight: var(--fw-display);
  color: var(--blue-600); font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tighter); line-height: 1.15;
}

/* ───────────────── Detay sayfasi başlık kartı ───────────────── */
.detail-head { display: flex; align-items: flex-start; gap: 16px; }
.detail-head__body { flex: 1; min-width: 0; }
.detail-head__title { font-size: 23px; font-weight: var(--fw-display); color: var(--text-heading); letter-spacing: var(--tracking-tighter); line-height: 1.2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 9px; }
.detail-head__chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--gray-500); }
.detail-head__chip .icon { color: var(--gray-400); }
.detail-head__chip a { color: var(--gray-600); }
.detail-head__chip a:hover { color: var(--blue-600); }

/* .card'ın ALT kenarına oturuyor — radius kartla birebir eşleşmeli,
   yoksa köşede dikiş görünür. */
.mini-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 0 0 var(--r-card) var(--r-card); overflow: hidden; }
.mini-kpi { background: var(--bg-surface); padding: 15px 20px; transition: background var(--t-fast) var(--ease); }
.mini-kpi:hover { background: var(--row-hover); }
.mini-kpi__label {
  font-size: var(--fs-label); color: var(--text-subtle);
  font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.mini-kpi__value { font-size: 19px; font-weight: var(--fw-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); margin-top: 2px; }
@media (max-width: 767px) { .mini-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ───────────────── Alt görevler ───────────────── */
.subtask-list { display: flex; flex-direction: column; gap: 2px; }
.subtask {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.subtask:last-child { border-bottom: 0; }
.subtask__check {
  border: 0; background: transparent; cursor: pointer;
  color: var(--gray-300); display: inline-flex; padding: 0;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.subtask__check:hover { color: var(--primary); transform: scale(1.12); }
.subtask.is-done .subtask__check { color: var(--green-500); }
.subtask__title { flex: 1; font-size: var(--fs-base); color: var(--gray-800); }
.subtask.is-done .subtask__title { text-decoration: line-through; color: var(--gray-400); }
.subtask__del {
  border: 0; background: transparent; cursor: pointer;
  color: var(--gray-300); display: inline-flex; padding: 4px; border-radius: var(--r-sm);
  opacity: 0; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.subtask:hover .subtask__del { opacity: 1; }
.subtask__del:hover { color: var(--red-600); background: var(--red-50); }

/* Kanban kartinda alt gorev rozeti */
.kanban-card__subtasks {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--gray-500); font-weight: var(--fw-medium);
}

/* ───────────────── Yorumlar ───────────────── */
.comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: 0; }
.comment__body { flex: 1; min-width: 0; }
.comment__head { display: flex; align-items: baseline; gap: 8px; }
.comment__author { font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--text-heading); }
.comment__time { font-size: var(--fs-xs); color: var(--text-subtle); }
.comment__text { font-size: var(--fs-base); color: var(--gray-700); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }