/* GörevKap — tasarım katmanı (Tailwind CDN üstünde ince bir kabuk) */

/* Tek bir taşan öğe tüm sayfayı yana kaydırmasın (mobilde en sık görülen hata) */
html{ overflow-x:hidden; }
body{ overflow-x:clip; max-width:100vw; }

:root{
  --gk-ink:#1E293B;      /* derin lacivert  */
  --gk-blue:#3B82F6;     /* canlı mavi      */
  --gk-emerald:#10B981;  /* kazanç yeşili   */
  --gk-bg:#F8FAFC;       /* nötr arka plan  */
  --gk-line:#E2E8F0;     /* çizgi/kenarlık  */
  --gk-muted:#64748B;
}

body{ background:var(--gk-bg); color:var(--gk-ink); font-family:'Inter',system-ui,sans-serif; }
h1,h2,h3,.display{ font-family:'Plus Jakarta Sans','Inter',sans-serif; letter-spacing:-0.02em; }

/* Para ve sayılar her yerde aynı genişlikte hizalanır */
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* --- İmza bileşen: kota şeridi ---------------------------------------
   Kotayı sürekli bir çubuk yerine 20 segmentlik bir sayaç olarak gösterir;
   "kaç kişi kaldı" hissi yüzdeden daha somut okunur.                     */
.quota{ display:flex; gap:2px; height:8px; }
.quota span{ flex:1; border-radius:2px; background:#E2E8F0; transition:background .25s ease; }
.quota span.on{ background:var(--gk-emerald); }
.quota span.edge{ background:var(--gk-blue); }

.card{ background:#fff; border:1px solid var(--gk-line); border-radius:16px; }
.card-hover{ transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card-hover:hover{ box-shadow:0 12px 28px -18px rgba(15,23,42,.35); border-color:#CBD5E1; transform:translateY(-2px); }

.badge{ display:inline-flex; align-items:center; gap:.375rem; padding:.2rem .55rem; border-radius:999px;
        font-size:.75rem; font-weight:600; line-height:1.4; }

/* Adım göstergesi (wizard) */
.stepdot{ width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
          font-size:.8rem; font-weight:700; border:2px solid var(--gk-line); color:var(--gk-muted); background:#fff; }
.stepdot.active{ border-color:var(--gk-blue); color:var(--gk-blue); }
.stepdot.done{ border-color:var(--gk-emerald); background:var(--gk-emerald); color:#fff; }

/* Sürükle-bırak alanı */
.dropzone{ border:2px dashed #CBD5E1; border-radius:14px; transition:.18s ease; }
.dropzone.drag{ border-color:var(--gk-blue); background:#EFF6FF; }

.focus-ring:focus-visible{ outline:2px solid var(--gk-blue); outline-offset:2px; }
[x-cloak]{ display:none !important; }

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

/* --- Ön yüz --- */
.prose-tr h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;font-weight:700;margin:1.75rem 0 .6rem}
.prose-tr h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;font-weight:700;margin:1.4rem 0 .5rem}
.prose-tr p{margin:.7rem 0;line-height:1.75;color:#334155}
.prose-tr ul,.prose-tr ol{margin:.7rem 0 .7rem 1.25rem;line-height:1.8;color:#334155}
.prose-tr ul{list-style:disc}.prose-tr ol{list-style:decimal}
.prose-tr a{color:#2563EB;text-decoration:underline}
.prose-tr table{width:100%;border-collapse:collapse;margin:1rem 0}
.prose-tr td,.prose-tr th{border:1px solid #E2E8F0;padding:.5rem .75rem;font-size:.9rem}

.ticker{display:flex;gap:.75rem;animation:slide 45s linear infinite;will-change:transform}
.ticker:hover{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Hareket azaltma tercihinde animasyon yerine yatay kaydırma */
@media (prefers-reduced-motion:reduce){
  .ticker{animation:none;width:auto;overflow-x:auto;padding-bottom:.5rem}
}

/* Yönetim kenar çubuğu: mobilde çekmece, masaüstünde sabit sütun.
   x-show mobilde display:none uygular; masaüstünde bunu geçersiz kılıyoruz. */
@media (min-width:1024px){
  .admin-drawer{ display:block !important; transform:none !important; }
}