/* ============================================================================
   TALENT PORTAL — MOBİL (cc-429 piksel-spec). Gerçek SaaS mobil app hissi (iOS).
   Veri bağlama (cc-425) korunur; bu katman yalnız görsel: token + component + ölçü.
   Component sözlüğü: mobile-shell / mobile-header / metric-card / portal-card /
   list-row / status-pill / bottom-nav. CSP: inline <script> yok; ham hex yalnız token'da.
   ============================================================================ */

:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --muted2: #94A3B8;
  --border: #E5E7EB;
  --border2: #F1F5F9;
  --primary: #5B3FFF;
  --primary-2: #7C3AED;
  --primary-soft: #F1EEFF;
  --green: #22C55E; --green-soft: #DCFCE7; --green-ink: #15803D;
  --amber: #F59E0B; --amber-soft: #FEF3C7; --amber-ink: #B45309;
  --red: #EF4444;   --red-soft: #FEE2E2;   --red-ink: #B91C1C;
  --blue: #3B82F6;  --blue-soft: #DBEAFE;  --blue-ink: #1D4ED8;
  --radius-lg: clamp(14px, 4vw, 18px);   /* cc-442: kart köşeleri akışkan */
  --radius-md: clamp(11px, 3vw, 14px);
  --shadow: 0 10px 30px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --tint-yil: #F4F0FF;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #E2E8F0; color: var(--text);
  font: 400 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: flex; justify-content: center; align-items: flex-start;
}
#tp-root { width: 100%; display: flex; justify-content: center; }

/* ── Mobil kabuk: dinamik viewport yüksekliğinde flex kolon (cc-434).
   Shell taşmayı gizler; tek scroll alanı .page, bottom-nav ise normal flex akışındadır. ── */
.mobile-shell {
  position: relative;
  width: 100%; max-width: 390px; margin: 0 auto;  /* cc-442: dar ekranda tam genişlik, geniş ekranda 390 cap */
  height: 100vh; height: 100dvh;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column;
  overflow: hidden;            /* iç scroll .page'de; nav scroll DIŞINDA kalır */
}
@media (min-width: 440px) {
  body { align-items: center; }
  .mobile-shell { border-radius: 22px; box-shadow: var(--shadow); }
}

/* ── Sayfa = TEK scroll alanı (shell içinde). Nav ayrı flex kardeş olduğundan
   içeriğin altına binmez; ufak alt boşluk son kartı nav'dan ayırır. ── */
.page {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;  /* cc-442: dikey scroll korunur; yatay taşma (tam-bleed çocuk/alt-piksel) kırpılır, dokunmatik yatay pan oluşmaz */
  /* cc-442: iç boşluk akışkan (dar ekran kompakt, taşma yok) */
  padding: clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) 24px;
  display: flex; flex-direction: column; gap: clamp(12px, 3.5vw, 16px);
}

/* ── Header (~56px) ── */
.mobile-header {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mobile-header h1 { font-size: clamp(18px, 5vw, 22px); font-weight: 700; margin: 0; letter-spacing: -.02em; }
.header-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.header-back, .header-action {
  width: 38px; height: 38px; flex: none; border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; cursor: pointer; font-size: 18px; color: var(--text); display: grid; place-items: center;
}
.header-spacer { width: 38px; flex: none; }

/* Marka + bildirim (Ana header) */
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff;
  display: grid; place-items: center; font-size: 16px; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.bell { position: relative; width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); cursor: pointer; font-size: 17px; color: var(--text); }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; }

/* ── Selam ── */
.greeting { font-size: clamp(18px, 5vw, 22px); font-weight: 700; letter-spacing: -.02em; }
.greeting-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ── Bölüm başlığı ── */
.section { display: flex; flex-direction: column; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.section-link { font-size: 13px; font-weight: 600; color: var(--primary); background: none; border: 0; padding: 0; cursor: pointer; }

/* ── metric-card (mini KPI, 92px) — cc-442: kartlar minmax(0,1fr) ile eşit bölünür,
   min-width:0 içeriğin track'i taşırmasını engeller; gap/padding/font akışkan. ── */
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 2vw, 12px); }
.metric-card {
  height: 92px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: clamp(8px, 3vw, 12px); display: flex; flex-direction: column; justify-content: space-between;
}
.metric-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; font-size: 15px; }
.metric-label { font-size: clamp(9px, 2.5vw, 11px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted2); overflow: hidden; text-overflow: ellipsis; }
.metric-value { font-size: clamp(16px, 4.5vw, 18px); font-weight: 700; letter-spacing: -.01em; display: flex;
  align-items: baseline; gap: 6px; min-width: 0; }
.metric-delta { font-size: 10px; font-weight: 700; color: var(--green); }
.metric-delta.down { color: var(--red); }
.metric-sub { font-size: clamp(9px, 2.5vw, 10px); color: var(--muted2); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }

/* ── portal-card (genel kart) ── */
.portal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: clamp(12px, 3.5vw, 16px); }   /* cc-442: esnek iç boşluk */

/* ── Kazanç hero kartı (210px) ── */
.earn-card { min-height: 210px; display: flex; flex-direction: column; }
.earn-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.earn-label { font-size: 13px; color: var(--muted); }
.earn-value { font-size: clamp(22px, 7vw, 28px); font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }  /* cc-442 */
.earn-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); margin-top: 8px; }
.earn-trend.down { background: var(--red-soft); color: var(--red-ink); }
.earn-chart { position: relative; flex: 1; min-height: 110px; margin-top: 12px; }

/* ── year-btn (yıl seçici) ── */
.year-btn { font-size: 12px; font-weight: 600; padding: 6px 11px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.year-btn.light { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: #fff; }

/* ── list (kart) + list-row ── */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px;
  border-top: 1px solid var(--border2); cursor: pointer; width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; }
.list-row:first-child { border-top: 0; }
.list-row:active { background: var(--border2); }
.list-row.lg { min-height: 96px; align-items: flex-start; }
.list-row.lg .avatar { margin-top: 1px; }
.list-row.static { cursor: default; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.row-amount { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chevron { color: var(--muted2); font-size: 20px; flex: none; }

/* ── avatar (monogram) ── */
.avatar { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; }
.avatar.a0 { background: var(--primary-soft); color: var(--primary); }
.avatar.a1 { background: var(--green-soft); color: var(--green-ink); }
.avatar.a2 { background: var(--blue-soft);  color: var(--blue-ink); }
.avatar.a3 { background: var(--amber-soft); color: var(--amber-ink); }
.avatar.a4 { background: var(--red-soft);   color: var(--red-ink); }

/* ── status-pill ── */
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.green   { background: var(--green-soft); color: var(--green-ink); }
.status-pill.amber   { background: var(--amber-soft); color: var(--amber-ink); }
.status-pill.red     { background: var(--red-soft);   color: var(--red-ink); }
.status-pill.blue    { background: var(--blue-soft);  color: var(--blue-ink); }
.status-pill.neutral { background: var(--border2);    color: var(--muted); }
.status-pill.neutral::before { background: var(--muted2); }

/* ── progress ── */
.progress { height: 5px; border-radius: 3px; background: var(--border2); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2)); }

/* ── date-chip (Bu Hafta) ── */
.date-chip { width: 46px; flex: none; text-align: center; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary); padding: 7px 0; }
.date-chip-day { font-size: 16px; font-weight: 700; line-height: 1; }
.date-chip-mon { font-size: 10px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }

/* ── segment ── */
.segment { display: flex; gap: 22px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.seg { background: none; border: 0; padding: 10px 0; cursor: pointer; font-size: 14px; color: var(--muted2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.seg.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.seg-count { color: var(--muted2); font-weight: 400; }

/* ── İş Detayı: info-row ── */
.info-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border2); }
.info-row:first-child { border-top: 0; }
.info-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--primary-soft);
  color: var(--primary); display: grid; place-items: center; font-size: 15px; }
.info-label { font-size: 12px; color: var(--muted2); }
.info-value { font-size: 14px; font-weight: 600; margin-top: 2px; }

/* ── uploader (dosya yükle, 116px dashed) ── */
.uploader { min-height: 116px; border: 1.5px dashed var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px; text-align: center; background: var(--bg); }
.uploader.drag { border-color: var(--primary); background: var(--primary-soft); }
.uploader-icon { font-size: 24px; }
.uploader-text { font-size: 13px; font-weight: 600; }
.uploader-link { font-size: 12px; color: var(--primary); background: none; border: 0; cursor: pointer; padding: 0; }
.uploader-sub { font-size: 12px; color: var(--muted2); }
.uploader-status { font-size: 12px; margin-top: 8px; color: var(--green-ink); }

/* ── Finans hero (154px gradient) ── */
.finance-hero { min-height: 154px; border-radius: var(--radius-lg); padding: 18px; color: #fff;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(135deg, #6D4DFF, #7C3AED); box-shadow: var(--shadow); }
.fh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fh-label { font-size: 12px; opacity: .9; }
.fh-value { font-size: clamp(22px, 7vw, 28px); font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }  /* cc-442 */
.fh-spark { display: block; width: 100%; height: 40px; margin-top: auto; }

/* ── Hakediş kırılımı ── */
.breakdown-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.breakdown-label { color: var(--muted); }
.breakdown-val { font-variant-numeric: tabular-nums; }
.breakdown-row.indent .breakdown-label, .breakdown-row.indent .breakdown-val { padding-left: 12px; color: var(--muted2); font-size: 12px; }
.breakdown-row.net { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.breakdown-row.net .breakdown-label, .breakdown-row.net .breakdown-val { color: var(--primary); font-weight: 700; font-size: 15px; }
.breakdown-cap { font-size: 12px; color: var(--muted2); margin-bottom: 6px; }

/* ── Profil ── */
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; color: #fff; display: grid;
  place-items: center; font-size: 22px; font-weight: 700; overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.profile-handle { font-size: 13px; color: var(--muted2); }
.platform-icon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700; }
.year-card { background: var(--tint-yil); border-color: #E7E0FF; }

/* Platform markaları (token) */
.ig-bg { background: linear-gradient(45deg, #FEDA75, #FA7E1E, #D62976, #962FBF, #5B3FFF); }
.tt-bg { background: #0F172A; }
.yt-bg { background: #FF0000; }

/* ── Maske (göz toggle, ekran-mahremiyeti) ── */
.private .mask { filter: blur(8px); user-select: none; }

/* ── İskelet shimmer ── */
.sk { position: relative; overflow: hidden; background: var(--border2); border-radius: 8px; display: inline-block; }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); animation: sk 1.3s infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
@keyframes sk { 100% { transform: translateX(100%); } }
.sk-r { height: 12px; margin: 7px 0; } .sk-40 { width: 40%; } .sk-60 { width: 60%; } .sk-80 { width: 80%; } .sk-100 { width: 100%; }

/* ── Boş durum ── */
.empty { padding: 30px 16px; text-align: center; color: var(--muted2); font-size: 13px; }
.empty-mini { padding: 16px; text-align: center; color: var(--muted2); font-size: 12px; }

/* ── bottom-nav (72px) — NORMAL akışta flex kardeş (cc-434): fixed/absolute DEĞİL.
   .page scroll eder, nav flex-shrink:0 ile hep altta sabit kalır; içerik asla altına binmez. ── */
.bottom-nav { flex-shrink: 0; height: 72px;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 20; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer; color: var(--muted2); font-size: 11px; font-weight: 500; height: 100%;
  justify-content: center; }
.nav-item.active { color: var(--primary); }
.nav-icon { font-size: 20px; line-height: 1; }

/* ── Yıl menüsü ── */
.year-menu { position: absolute; z-index: 40; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 5px; min-width: 116px; }
.year-option { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--text); }
.year-option:hover, .year-option.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════════
   cc-432 — Operasyon-ağırlıklı + kompakt düzen (bugün ne yapmalıyım)
   ════════════════════════════════════════════════════════════════════════════ */

/* Bugün/yarın çekim → dolu (aktif) çip; pasif gri görünümü kaldırır */
.date-chip.soon { background: var(--primary); color: #fff; }

/* Aksiyon gerektiren satır (faturası kesilmeyen iş) — sol amber accent + öne çıkar */
.list-row.flag { box-shadow: inset 3px 0 0 var(--amber); }
.flag-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); white-space: nowrap; }

/* Katlanır bölüm (Tamamlananlar gizli → tıkla aç) */
.collapse { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.collapse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 13px 14px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text); }
.collapse-head .caret { color: var(--muted2); font-size: 13px; transition: transform .18s ease; }
.collapse.open .collapse-head .caret { transform: rotate(180deg); }
.collapse-head-title { font-size: 14px; font-weight: 600; }
.collapse-head-count { color: var(--muted2); font-weight: 400; font-size: 13px; }
.collapse-body { display: none; border-top: 1px solid var(--border2); }
.collapse.open .collapse-body { display: block; }

/* Kompakt finans (ikincil) — 3'lü mini grid + küçük grafik (cc-442: akışkan, taşmasız) */
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 2vw, 8px); }
.metric-card.sm { height: auto; min-height: 74px; padding: clamp(7px, 2.5vw, 10px); gap: 4px; }
.metric-card.sm .metric-icon { display: none; }
.metric-card.sm .metric-value { font-size: clamp(13px, 4vw, 15px); }
.metric-card.sm .metric-label { font-size: clamp(8px, 2.4vw, 9px); }
.metric-card.sm .metric-sub { font-size: clamp(8px, 2.4vw, 9px); }
.earn-card.compact { min-height: 0; }
.earn-card.compact .earn-chart { min-height: 92px; }

/* Bölüm üst boşluğu daralt (kompakt akış) */
.section.tight { margin-top: -4px; }

/* ── Giriş ekranı ── */
.login-wrap { max-width: 360px; margin: 0 auto; padding: 64px 24px; display: flex; flex-direction: column; gap: 12px;
  min-height: 100vh; min-height: 100dvh; justify-content: center; }
.login-logo { text-align: center; margin-bottom: 14px; }
.login-logo-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; font-size: 26px; }
.login-title { font-size: 19px; font-weight: 700; margin-top: 12px; }
.input { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  font-size: 14px; background: var(--surface); color: var(--text); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.btn { width: 100%; padding: 13px 14px; border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
.btn:disabled { opacity: .65; cursor: default; }
.error { font-size: 13px; color: var(--red-ink); background: var(--red-soft);
  padding: 10px 12px; border-radius: var(--radius-md); }