/* Kariyer page — fullscreen overlay app, same OS logic as manifesto/customers */

.car-bar{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 18px;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.car-bar .lights{ display:flex; gap: 7px; }
.car-bar .lights .lt{ width: 12px; height: 12px; border-radius: 999px; }
.car-bar .lights .lt.r{ background:#ff5f57; cursor: pointer; }
.car-bar .lights .lt.y{ background:#febc2e; }
.car-bar .lights .lt.g{ background:#28c840; }
.car-bar .title{ flex: 1; padding-left: 14px; display:flex; gap: 12px; align-items:center; font-family: var(--f-mono); font-size: 12px; min-width: 0; }
.car-bar .title b{ font-family: var(--f-display); font-size: 15px; flex: 0 0 auto; }
.car-bar .crumb{ padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); cursor: pointer; }
.car-bar .crumb:hover{ background: rgba(255,255,255,0.18); }
.car-bar .status{ display:flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 12px; opacity: 0.85; }
.car-bar .status .dot{ width: 8px; height: 8px; border-radius: 999px; background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); }

.careers-page{ background: var(--paper); min-height: 100vh; }

/* ─── Hero ─── */
.ca-hero{ padding: 96px 32px 64px; max-width: 1280px; margin: 0 auto; }
.ca-hero .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ca-hero h1{
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: 116px; line-height: 0.92; margin: 18px 0 0; max-width: 1120px;
}
.ca-hero h1 .violet{ color: var(--c-lms); }
.ca-hero h1 .scribble{ position: relative; display: inline-block; }
.ca-hero h1 .scribble::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-6px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 Q 30 2 60 6 T 120 7 T 198 5' stroke='currentColor' fill='none' stroke-width='2.8' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.ca-hero .lead{ font-size: 19px; color: var(--ink-2); max-width: 600px; line-height: 1.55; margin: 22px 0 0; }
.ca-hero .meta-line{
  margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 22px;
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.ca-hero .meta-line b{ color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; display: block; margin-bottom: 2px; text-transform: none; }

/* ─── Section heads (shared) ─── */
.ca-head .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ca-head h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 56px; margin: 8px 0 0; line-height: 1.02; }
.ca-head .sub{ color: var(--ink-3); font-size: 17px; max-width: 560px; margin: 10px 0 0; line-height: 1.5; }

/* ─── Perks ─── */
.ca-perks{ padding: 88px 32px; max-width: 1280px; margin: 0 auto; }
.ca-perks .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.perk{
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px; display:flex; flex-direction: column; gap: 12px; position: relative;
}
.perk .pico{
  width: 40px; height: 40px; border-radius: 11px;
  display:flex; align-items:center; justify-content:center;
  background: var(--pc, var(--ink)); color: var(--pct, var(--paper));
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
}
.perk h4{ font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.perk p{ color: var(--ink-2); margin: 0; line-height: 1.55; font-size: 15px; }

/* ─── Open roles ─── */
.ca-roles{ background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 88px 32px; }
.ca-roles .inner{ max-width: 1280px; margin: 0 auto; }
.ca-roles .bar{ display:flex; align-items:flex-end; justify-content:space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.ca-filters{ display:flex; gap: 7px; flex-wrap: wrap; }
.ca-filters button{
  font-family: var(--f-mono); font-size: 12px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); transition: all .12s;
}
.ca-filters button:hover{ border-color: var(--rule); }
.ca-filters button.on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ca-filters button .n{ opacity: 0.5; margin-left: 5px; }

.role-list{ display:flex; flex-direction: column; gap: 10px; }
.role{
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px; display:flex; align-items:center; gap: 20px;
  transition: transform .12s, border-color .12s, box-shadow .12s; cursor: pointer;
}
.role:hover{ transform: translateY(-2px); border-color: var(--rule); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.25); }
.role .tag-dot{ width: 10px; height: 10px; border-radius: 999px; flex: 0 0 10px; background: var(--rc, var(--ink)); }
.role .main{ flex: 1; min-width: 0; }
.role .main .rt{ font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; line-height: 1.1; }
.role .main .rmeta{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-top: 4px; display:flex; gap: 14px; flex-wrap: wrap; }
.role .team-pill{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: 999px; flex: 0 0 auto;
  background: var(--rsoft, var(--paper-2)); color: var(--rc, var(--ink)); border: 1px solid var(--rline, var(--line));
}
.role .apply{ font-family: var(--f-mono); font-size: 13px; color: var(--ink); display:flex; align-items:center; gap: 6px; flex: 0 0 auto; }
.role .apply .arr{ transition: transform .15s ease; }
.role:hover .apply .arr{ transform: translateX(3px); }
.ca-roles .empty{ text-align:center; padding: 40px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); }

/* ─── Hiring process ─── */
.ca-process{ padding: 88px 32px; max-width: 1080px; margin: 0 auto; }
.ca-process .steps{ position: relative; padding-left: 28px; margin-top: 32px; }
.ca-process .steps::before{ content:""; position:absolute; top: 10px; bottom: 10px; left: 5px; width: 2px; background: var(--line); }
.proc-step{ position: relative; padding: 16px 0; display:grid; grid-template-columns: 56px 1fr; gap: 28px; align-items: baseline; }
.proc-step::before{
  content:""; position:absolute; left: -28px; top: 24px;
  width: 12px; height: 12px; border-radius: 999px; background: var(--c-lms); border: 2px solid var(--c-lms);
}
.proc-step .pn{ font-family: var(--f-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--c-lms); }
.proc-step .pt{ font-family: var(--f-display); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; margin: 0 0 4px; }
.proc-step .pd{ font-size: 16px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.proc-step .pdur{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ─── Band ─── */
.ca-band{ background: var(--ink); color: var(--paper); padding: 80px 32px; }
.ca-band .inner{ max-width: 1280px; margin: 0 auto; }
.ca-band .eye{ font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ca-band h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 44px; margin: 8px 0 0; line-height: 1.04; max-width: 720px; }
.ca-band .grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; overflow: hidden; margin-top: 40px; }
.ca-band .cell{ background: var(--ink); padding: 30px 28px; }
.ca-band .cell b{ font-family: var(--f-display); font-weight: 600; font-size: 52px; letter-spacing: -0.03em; line-height: 0.9; display:block; }
.ca-band .cell b .accent{ color: var(--cellcol, var(--c-lms)); }
.ca-band .cell .lbl{ font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 12px; line-height: 1.4; }

/* ─── CTA ─── */
.ca-cta{ padding: 110px 32px; text-align: center; }
.ca-cta h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; font-size: 80px; line-height: 0.95; margin: 0 0 18px; max-width: 920px; margin-left:auto; margin-right:auto; text-wrap: balance; }
.ca-cta .scribble{ position: relative; display: inline-block; }
.ca-cta .scribble::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:-4px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 7 Q 30 2 60 6 T 120 7 T 198 5' stroke='currentColor' fill='none' stroke-width='2.8' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  color: var(--c-lms);
}
.ca-cta p{ color: var(--ink-3); font-size: 19px; max-width: 520px; margin: 0 auto 30px; }
.ca-cta .row{ display:flex; gap: 12px; justify-content:center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1000px){
  .ca-hero h1{ font-size: 68px; }
  .ca-perks .grid{ grid-template-columns: 1fr 1fr; }
  .ca-band .grid{ grid-template-columns: 1fr 1fr; }
  .ca-cta h2{ font-size: 52px; }
  .role{ flex-wrap: wrap; gap: 12px; }
  .role .team-pill{ order: 3; }
}
@media (max-width: 640px){
  .car-bar .status{ display: none; }
  .car-bar .title > span:not(.crumb){ display: none; }
  .ca-hero h1{ font-size: 48px; }
  .ca-perks .grid{ grid-template-columns: 1fr; }
  .ca-band .grid{ grid-template-columns: 1fr; }
  .ca-cta h2{ font-size: 40px; }
  .proc-step{ grid-template-columns: 40px 1fr; gap: 16px; }
}