/* PeakPinLife — /peakpinlife. Builds on styles.css tokens; nothing here
   overrides a shared class outside this page. */

:root{
  /* Small accent text on white. --accent (#12D6E8) is ~1.8:1 on #fff and
     --accent-hover ~2.2:1 — fine as a fill, unreadable as 13px text. */
  --pl-accent-text:#0A7580;
  --pl-danger:#B42318;
}

.navlinks a.is-current{color:var(--text);font-weight:600;}
/* "Açıq vakansiyalar" is the longest nav CTA on the site: at 320px it pushed
   the page 30px wide (measured on peakpin.app). The hero repeats the same
   link, so on narrow phones the header keeps only brand + language. */
@media(max-width:400px){.nav-cta .btn{display:none;}}

.pl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- Hero ---------- */
.pl-hero{
  padding:72px 0 16px;position:relative;
  background:radial-gradient(700px 320px at 12% 0%, rgba(18,214,232,.12), transparent 70%);
}
.pl-h1{font-size:clamp(46px,7vw,84px);margin:0 0 18px;}
.pl-subtitle{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.015em;margin:0 0 14px;max-width:720px;}
.pl-lead{font-size:18px;line-height:1.6;color:var(--text-muted);max-width:620px;margin:0 0 30px;}

/* ---------- Jobs ---------- */
.pl-jobs{padding-top:64px;scroll-margin-top:80px;}
.pl-jobs .section-head{margin-bottom:28px;}
.pl-content-note{margin-top:10px !important;font-size:14px !important;}

.pl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.pl-chip{
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;font-weight:600;color:var(--text);
  background:var(--card);border:1px solid var(--divider);border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.pl-chip:hover{border-color:var(--text);}
.pl-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#fff;}
.pl-chip-count{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-muted);}
.pl-chip-count:empty{display:none;}
.pl-chip[aria-pressed="true"] .pl-chip-count{color:rgba(255,255,255,.7);}
.pl-chip:focus-visible,.pl-card-more:focus-visible,.pl-sheet-close:focus-visible,.pl-back:focus-visible{outline:2px solid var(--pl-accent-text);outline-offset:2px;}

.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
@media(max-width:420px){.pl-grid{grid-template-columns:1fr;}}

.pl-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--card);border:1px solid var(--divider);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:24px;min-height:220px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pl-card:not(.pl-skeleton):hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:rgba(18,214,232,.45);}
.pl-dept{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--pl-accent-text);text-transform:uppercase;
}
.pl-card-title{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin:0;}
.pl-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.pl-meta li{
  font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--divider);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.pl-card-desc{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pl-card-more{
  margin-top:auto;align-self:flex-start;font:inherit;font-size:14.5px;font-weight:700;
  color:var(--pl-accent-text);background:none;border:none;padding:6px 0 0;cursor:pointer;
}
/* The whole card is the click target; the button stays the one focusable. */
.pl-card-more::after{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);}

.pl-skeleton span{display:block;border-radius:8px;background:linear-gradient(90deg,var(--surface),#F7F9FA,var(--surface));background-size:200% 100%;animation:pl-shimmer 1.4s linear infinite;}
.pl-skeleton span:nth-child(1){width:40%;height:12px;}
.pl-skeleton span:nth-child(2){width:75%;height:22px;}
.pl-skeleton span:nth-child(3){width:90%;height:60px;margin-top:8px;}
@keyframes pl-shimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}

.pl-state{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  background:var(--card);border:1px dashed rgba(17,24,39,.18);border-radius:var(--radius-lg);
  padding:48px 24px;color:var(--text-muted);font-size:15.5px;
}
.pl-state p{margin:0;}
.pl-state-error{border-color:rgba(180,35,24,.35);}
.pl-state-error p{color:var(--pl-danger);}

/* ---------- Side sheet ---------- */
.pl-lock{overflow:hidden;}
.pl-sheet{position:fixed;inset:0;z-index:300;}
.pl-sheet-backdrop{position:absolute;inset:0;background:rgba(11,19,48,.45);animation:pl-fade .2s ease;}
.pl-sheet-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(600px,100%);
  background:var(--card);box-shadow:var(--shadow-lift);overflow-y:auto;overscroll-behavior:contain;
  animation:pl-slide .24s cubic-bezier(.2,.8,.2,1);outline:none;
}
.pl-sheet-body{padding:40px 36px 32px;}
@media(max-width:560px){
  .pl-sheet-panel{top:auto;height:92vh;height:92dvh;border-radius:22px 22px 0 0;animation-name:pl-rise;}
  .pl-sheet-body{padding:34px 20px 24px;}
}
@keyframes pl-fade{from{opacity:0;}to{opacity:1;}}
@keyframes pl-slide{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes pl-rise{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.pl-sheet-close{
  position:sticky;top:12px;float:right;margin:12px 12px 0 0;z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--divider);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);
}
.pl-sheet-close svg{width:18px;height:18px;}
.pl-sheet-title{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:6px 0 14px;}
.pl-meta-lg li{font-size:14px;padding:6px 12px;}
/* styles.css gives every <section> 96px of padding — not these. */
.pl-sec{margin-top:28px;padding:0;}
.pl-sec h3{font-size:16px;font-weight:700;margin:0 0 10px;}
.pl-desc{margin:0;font-size:15px;line-height:1.65;white-space:pre-line;}
.pl-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:15px;line-height:1.55;}
.pl-list li::marker{color:var(--accent-hover);}
.pl-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:0;}
@media(max-width:480px){.pl-facts{grid-template-columns:1fr;}}
.pl-facts dt{font-size:12.5px;color:var(--text-muted);margin-bottom:2px;}
.pl-facts dd{margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;}
.pl-sheet-cta{
  position:sticky;bottom:-32px;margin:32px -36px -32px;padding:16px 36px 24px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);
}
@media(max-width:560px){.pl-sheet-cta{margin:28px -20px -24px;padding:14px 20px 20px;bottom:-24px;}}
.pl-sheet-cta .btn{width:100%;padding:14px 20px;font-size:16px;}

/* ---------- Form ---------- */
.pl-back{
  display:block;
  font:inherit;font-size:14px;font-weight:600;color:var(--text-muted);
  background:none;border:none;padding:0;margin-bottom:14px;cursor:pointer;
}
.pl-back::before{content:'← ';}
.pl-back:hover{color:var(--text);}
.pl-form-lead{margin:0 0 22px;color:var(--text-muted);font-size:15px;}
.pl-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.pl-fields{grid-template-columns:1fr;}}
.pl-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.pl-wide{grid-column:1 / -1;}
.pl-field > label{font-size:14px;font-weight:600;}
.pl-req{color:var(--pl-danger);margin-left:3px;}
.pl-opt{color:var(--text-muted);font-weight:500;margin-left:6px;}
.pl-field input[type="text"],.pl-field input[type="email"],.pl-field input[type="tel"],.pl-field input[type="url"],.pl-field textarea{
  font:inherit;font-size:15px;color:var(--text);background:#fff;
  border:1px solid rgba(17,24,39,.16);border-radius:var(--radius-sm);padding:11px 14px;width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pl-field textarea{resize:vertical;min-height:96px;}
.pl-field input[type="file"]{
  font:inherit;font-size:14px;background:var(--surface);border:1px dashed rgba(17,24,39,.22);
  border-radius:var(--radius-sm);padding:12px;width:100%;
}
.pl-field input:focus,.pl-field textarea:focus{outline:none;border-color:var(--pl-accent-text);box-shadow:0 0 0 3px rgba(18,214,232,.25);}
.pl-field [aria-invalid="true"]{border-color:var(--pl-danger) !important;}
.pl-hint{margin:0;font-size:12.5px;color:var(--text-muted);}
.pl-err{margin:0;font-size:13px;color:var(--pl-danger);font-weight:500;}
.pl-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500 !important;line-height:1.5;cursor:pointer;}
.pl-check input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0;accent-color:var(--pl-accent-text);}
.pl-check a{color:var(--pl-accent-text);text-decoration:underline;text-underline-offset:2px;}
.pl-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.pl-form-status{
  margin:18px 0 0;padding:12px 14px;border-radius:var(--radius-sm);
  background:rgba(180,35,24,.07);color:var(--pl-danger);font-size:14px;font-weight:500;
}
.pl-submit[disabled]{opacity:.7;cursor:progress;}

.pl-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:56px 8px 24px;}
.pl-success-icon{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(18,214,232,.14);color:var(--pl-accent-text);font-size:30px;font-weight:800;margin-bottom:10px;
  animation:pl-pop .35s cubic-bezier(.2,.8,.2,1.2);
}
.pl-success p{margin:0 0 10px;color:var(--text-muted);font-size:15.5px;max-width:380px;line-height:1.55;}
.pl-ok-mail{font-size:14px !important;margin-bottom:22px !important;}
@keyframes pl-pop{from{transform:scale(.6);opacity:0;}to{transform:none;opacity:1;}}