/* =============================================
   KIPMAN SOFT — Career Page CSS v4.0
   HTML kullanımına uygun olarak yeniden yazıldı
   ============================================= */

/* ── Yan Haklar (Perks) ─────────────────────── */
.perks-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.perk-card{
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r-xl);padding:28px 22px;
  transition:all var(--t-med);text-align:center;
}
.perk-card:hover{
  border-color:rgba(227,30,36,.25);
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}
.perk-card .icon-box{
  width:54px;height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-bg);color:var(--red);
  border-radius:14px;margin:0 auto 16px;
}
.perk-card .icon-box svg{width:26px;height:26px}
.perk-card h4{margin-bottom:8px;font-size:1rem;color:var(--txt)}
.perk-card p{font-size:.86rem;line-height:1.65;color:var(--txt-3)}

/* ── Kültür (3-grid layout) ──────────────────── */
.culture-section{background:var(--bg-dark);color:#fff}
.culture-section h2{color:#fff}
.culture-section .section-tag{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.16);
}
.culture-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
  max-width:1100px;margin:0 auto;
  min-height:480px;
}
.culture-img{
  position:relative;overflow:hidden;
  border-radius:var(--r-xl);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.culture-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.culture-img:hover img{transform:scale(1.05)}
.ci-span{grid-row:1/3}
.culture-caption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent 0%,rgba(15,23,42,.85) 100%);
  color:#fff;padding:36px 18px 16px;
  font-size:.88rem;font-weight:600;letter-spacing:.01em;
}

/* ── Açık Pozisyonlar ────────────────────────── */
.jobs-section{background:var(--bg-2)}

/* Filtre butonları */
.jobs-filter{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-bottom:32px;
}
.job-filter-btn{
  padding:8px 18px;border-radius:var(--r-full);
  background:var(--bg);border:1.5px solid var(--border);
  font-size:.85rem;font-weight:600;color:var(--txt-2);
  font-family:var(--font);
  transition:all var(--t);cursor:pointer;
}
.job-filter-btn:hover{
  border-color:rgba(227,30,36,.4);
  color:var(--red);
}
.job-filter-btn.active{
  background:var(--red);color:#fff;
  border-color:var(--red);
  box-shadow:var(--shadow-red);
}

/* Job item kart */
.jobs-list{
  display:flex;flex-direction:column;gap:12px;
  max-width:1080px;margin:0 auto;
}
.job-item{
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t);
}
.job-item:hover{border-color:rgba(227,30,36,.25)}
.job-item.open{
  border-color:var(--red);
  box-shadow:0 0 0 4px var(--red-bg);
}

/* Job header (clickable) */
.job-header{
  display:flex;align-items:center;gap:18px;
  padding:20px 24px;cursor:pointer;
  transition:background var(--t);
}
.job-header:hover{background:var(--bg-2)}
.job-item.open .job-header{background:var(--red-bg)}

.job-header-left{
  display:flex;align-items:center;gap:16px;
  flex:1;min-width:0;
}
.job-header-right{
  display:flex;align-items:center;gap:14px;
  flex-shrink:0;
}

/* Job icon (renkli SVG kare) */
.job-icon{
  width:48px;height:48px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red-bg);color:var(--red);
  border-radius:12px;
  transition:all var(--t);
}
.job-icon svg{width:24px;height:24px}
.job-item.open .job-icon{background:var(--red);color:#fff}

/* Job title + meta */
.job-title-wrap{flex:1;min-width:0}
.job-title-wrap h3{
  font-size:1.05rem;margin:0 0 6px;color:var(--txt);
  font-weight:700;
}
.job-meta-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;
}
.job-tag{
  font-size:.72rem;font-weight:600;
  padding:3px 10px;border-radius:var(--r-full);
  display:inline-flex;align-items:center;line-height:1.4;
  letter-spacing:.01em;
}
.job-tag.dept{
  background:var(--bg-3);color:var(--txt-2);
  border:1px solid var(--border);
}
.job-tag.type{
  background:rgba(34,197,94,.10);color:#15803d;
  border:1px solid rgba(34,197,94,.22);
}
.job-tag.loc{
  background:rgba(59,130,246,.10);color:#1d4ed8;
  border:1px solid rgba(59,130,246,.22);
}

.job-salary{
  font-family:var(--font-d);font-size:.92rem;font-weight:700;
  color:var(--red);white-space:nowrap;
}

.job-toggle-icon{
  width:34px;height:34px;flex-shrink:0;
  background:var(--bg-3);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.job-toggle-icon svg{
  width:16px;height:16px;
  stroke:var(--txt-3);transition:all .3s ease;
}
.job-item.open .job-toggle-icon{background:var(--red)}
.job-item.open .job-toggle-icon svg{stroke:#fff;transform:rotate(45deg)}

/* Job detail (açılan içerik) */
.job-detail{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease;
}
.job-detail-body{
  padding:8px 24px 28px;
  display:grid;grid-template-columns:1.5fr 1fr;gap:36px;
  border-top:1px solid var(--border);
  margin-top:0;padding-top:24px;
}
.job-desc h4{
  font-size:.92rem;font-weight:700;color:var(--txt);
  margin-bottom:10px;
}
.job-desc p{
  font-size:.9rem;line-height:1.7;color:var(--txt-2);
  margin-bottom:8px;
}
.job-desc ul{
  display:flex;flex-direction:column;gap:8px;
  margin-top:8px;list-style:none;padding:0;
}
.job-desc ul li{
  font-size:.88rem;color:var(--txt-2);line-height:1.6;
  display:flex;align-items:flex-start;gap:10px;
  padding-left:0;
}
.job-desc ul li::before{
  content:'';width:6px;height:6px;
  background:var(--red);border-radius:50%;
  flex-shrink:0;margin-top:8px;
}

.job-apply-wrap{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-2);
  padding:22px;border-radius:var(--r-lg);
  border:1px solid var(--border);
  align-self:start;
}
.job-apply-wrap .btn{width:100%;justify-content:center}
.job-apply-note{
  font-size:.78rem;color:var(--txt-3);line-height:1.5;
  margin-top:4px;
}

/* ── Başvuru Bölümü (Apply) ──────────────────── */
.apply-section.section--dark{background:var(--bg-dark);color:#fff}
.apply-section.section--dark h2,
.apply-section.section--dark h3,
.apply-section.section--dark h4{color:#fff}
.apply-section.section--dark .section-tag{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.16);
}
.apply-section.section--dark p{color:rgba(255,255,255,.7)}

.apply-grid{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:56px;align-items:start;
  max-width:1180px;margin:0 auto;
}
.apply-info > p{
  font-size:1rem;line-height:1.7;
  margin-bottom:32px;
  color:rgba(255,255,255,.78);
}

.apply-steps{
  display:flex;flex-direction:column;gap:18px;
}
.apply-step{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
}
.apply-step-num{
  width:36px;height:36px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;
  font-family:var(--font-d);font-size:.95rem;font-weight:800;
  border-radius:10px;
}
.apply-step h4{
  font-size:.95rem;margin:0 0 4px;color:#fff;
}
.apply-step p{
  font-size:.84rem;line-height:1.55;
  color:rgba(255,255,255,.65);margin:0;
}

.apply-form-wrap{
  background:var(--bg);color:var(--txt);
  border-radius:var(--r-2xl);
  padding:40px 36px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.apply-form-wrap h3{
  color:var(--txt);font-size:1.25rem;
  margin-bottom:6px;
}
.apply-form-wrap > p{
  font-size:.88rem;color:var(--txt-3);
  margin-bottom:24px;
}
.apply-form{
  display:flex;flex-direction:column;gap:14px;
}
.apply-form .form-group label{
  display:block;font-size:.82rem;font-weight:600;
  color:var(--txt-2);margin-bottom:6px;
}
.apply-form .form-control{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--r-sm);
  font-size:.9rem;color:var(--txt);
  background:var(--bg);
  transition:all var(--t);
}
.apply-form .form-control:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-bg);
}
.apply-form select.form-control{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  background-size:14px;padding-right:38px;
}
.apply-form textarea.form-control{
  resize:vertical;min-height:100px;
  font-family:var(--font);
}

/* File input — özel görünüm */
.file-input-wrap{
  position:relative;
}
.file-input-wrap input[type="file"]{
  position:absolute;inset:0;
  opacity:0;width:100%;height:100%;
  cursor:pointer;z-index:2;
}
.file-drop{
  border:2px dashed var(--border-2);
  border-radius:var(--r-lg);
  padding:24px 18px;text-align:center;
  background:var(--bg-2);
  transition:all var(--t);
  pointer-events:none;
}
.file-input-wrap:hover .file-drop{
  border-color:var(--red);
  background:var(--red-bg);
}
.file-drop p{
  font-size:.86rem;color:var(--txt-3);margin:0;
}
.file-drop span{color:var(--red);font-weight:600}

/* ── Responsive ─────────────────────────────── */
@media(max-width:1024px){
  .perks-grid{grid-template-columns:repeat(2,1fr)}
  .culture-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    min-height:0;
  }
  .culture-grid .ci-span{grid-row:auto}
  .culture-img{min-height:240px}
  .apply-grid{grid-template-columns:1fr;gap:40px}
  .job-detail-body{grid-template-columns:1fr;gap:24px}
}
@media(max-width:768px){
  .perks-grid{grid-template-columns:repeat(2,1fr)}
  .job-header{
    flex-wrap:wrap;gap:12px;padding:16px 18px;
  }
  .job-header-right{
    width:100%;justify-content:space-between;
    padding-top:12px;border-top:1px solid var(--border);
  }
  .job-icon{width:42px;height:42px}
  .job-icon svg{width:22px;height:22px}
  .job-title-wrap h3{font-size:.98rem}
  .job-detail-body{padding:8px 18px 22px}
  .apply-form-wrap{padding:28px 22px}
}
@media(max-width:480px){
  .perks-grid{grid-template-columns:1fr}
  .jobs-filter{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .job-filter-btn{flex-shrink:0;font-size:.8rem;padding:7px 14px}
  .job-meta-tags{gap:4px}
  .job-tag{font-size:.68rem;padding:2px 8px}
}