/* =============================================
   KIPMAN SOFT — Portfolio Page CSS v4.0
   HTML class'larına uyumlu — projeler.html
   ============================================= */

/* ── Vaka Çalışması (öne çıkan) ─────────────── */
.case-study-section{background:var(--bg);position:relative;overflow:hidden}
.case-study-section::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  top:-200px;right:-200px;
  background:radial-gradient(circle,rgba(227,30,36,.06) 0%,transparent 65%);
  pointer-events:none;
}
.case-study-section .container{position:relative;z-index:1}

.case-study-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-2xl);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(15,23,42,.10),0 8px 24px rgba(15,23,42,.06);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  max-width:1180px;margin:0 auto;
  position:relative;
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
}
.case-study-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:4px;z-index:3;
  background:linear-gradient(90deg,var(--red) 0%,#ff6b6b 50%,var(--red) 100%);
}
.case-study-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 80px rgba(15,23,42,.14),0 12px 30px rgba(227,30,36,.10);
}
.cs-img{
  position:relative;overflow:hidden;
  min-height:440px;
}
.cs-img img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.case-study-card:hover .cs-img img{transform:scale(1.05)}
.cs-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    160deg,
    rgba(15,23,42,.18) 0%,
    rgba(15,23,42,.55) 55%,
    rgba(227,30,36,.88) 100%
  );
}
.cs-img-content{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 32px;color:#fff;
}
.cs-img-content .section-tag{
  background:rgba(255,255,255,.18);
  color:#fff;border-color:rgba(255,255,255,.28);
  margin-bottom:14px;backdrop-filter:blur(10px);
}
.cs-img-content h2{
  color:#fff;font-size:1.75rem;margin:0;
  line-height:1.22;letter-spacing:-.02em;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}
.cs-body{
  padding:48px 44px;
  display:flex;flex-direction:column;
  justify-content:center;
}
.cs-body h3{
  font-size:1.4rem;color:var(--txt);margin-bottom:14px;
  line-height:1.3;
}
.cs-body > p{
  font-size:.96rem;line-height:1.75;
  color:var(--txt-3);margin-bottom:28px;
}
.cs-results{
  display:grid;grid-template-columns:1fr 1fr;
  gap:14px;margin-bottom:30px;
}
.cs-result-item{
  padding:18px 14px;
  background:linear-gradient(135deg,#fff 0%,var(--bg-2) 100%);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  text-align:center;
  transition:all var(--t);
  position:relative;overflow:hidden;
}
.cs-result-item::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--red-light));
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
}
.cs-result-item:hover{
  border-color:rgba(227,30,36,.3);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(227,30,36,.10);
}
.cs-result-item:hover::after{transform:scaleX(1)}
.cs-result-item strong{
  display:block;font-family:var(--font-d);
  font-size:1.7rem;font-weight:900;
  background:linear-gradient(135deg,var(--red) 0%,#ff6b6b 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.05;margin-bottom:6px;
}
.cs-result-item span{
  font-size:.78rem;color:var(--txt-3);
  font-weight:600;letter-spacing:.02em;
}

/* ── Filtre Çubuğu ───────────────────────────── */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;margin-bottom:36px;
}
.filter-btn{
  padding:8px 18px;border-radius:var(--r-full);
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.15);
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.85);
  font-family:var(--font);
  transition:all var(--t);cursor:pointer;
}
.filter-btn:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
.filter-btn.active{
  background:var(--red);color:#fff;
  border-color:var(--red);
  box-shadow:var(--shadow-red);
}
/* Light section'daki filtre */
.section:not(.section--dark) .filter-bar .filter-btn{
  background:var(--bg);color:var(--txt-2);
  border-color:var(--border);
}
.section:not(.section--dark) .filter-bar .filter-btn:hover{
  border-color:rgba(227,30,36,.4);color:var(--red);
}

/* ── Proje Kartları (grid) ──────────────────── */
.proj-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1180px;margin:0 auto;
}
.proj-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease;
  display:flex;flex-direction:column;
  position:relative;
  isolation:isolate;
}
/* Üst kenar kırmızı vurgu çizgisi — hover'da animasyonlu çıkar */
.proj-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;z-index:2;
  background:linear-gradient(90deg,var(--red) 0%,#ff6b6b 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,.12),0 6px 14px rgba(227,30,36,.10);
  border-color:rgba(227,30,36,.25);
}
.proj-card:hover::before{transform:scaleX(1)}

.proj-img{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;
}
.proj-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover .proj-img img{transform:scale(1.08)}
.proj-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    180deg,
    rgba(15,23,42,0) 30%,
    rgba(15,23,42,.6) 70%,
    rgba(227,30,36,.85) 100%
  );
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;
  opacity:0;transition:opacity .4s ease;
}
.proj-card:hover .proj-img-overlay{opacity:1}
.proj-overlay-tag{
  align-self:flex-start;
  background:rgba(255,255,255,.22);
  color:#fff;
  font-size:.72rem;font-weight:700;
  padding:5px 12px;border-radius:var(--r-full);
  letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:12px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}
.proj-overlay-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--bg);color:var(--red);
  font-size:.86rem;font-weight:700;
  padding:11px 16px;border-radius:var(--r-sm);
  text-align:center;
  transition:all var(--t);
  align-self:stretch;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  position:relative;
}
.proj-overlay-cta::after{
  content:'→';margin-left:4px;
  transition:transform var(--t);
  font-weight:800;
}
.proj-overlay-cta:hover{
  background:var(--red);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(227,30,36,.4);
}
.proj-overlay-cta:hover::after{transform:translateX(4px)}

.proj-body{
  padding:20px 22px;
  display:flex;flex-direction:column;gap:10px;
  flex:1;
  background:var(--bg);
  position:relative;
}
.proj-cats{
  display:flex;flex-wrap:wrap;gap:6px;
}
.proj-cat-tag{
  font-size:.68rem;font-weight:700;
  color:var(--red);
  background:var(--red-bg);
  padding:3px 10px;border-radius:var(--r-full);
  letter-spacing:.04em;text-transform:uppercase;
}
.proj-body h3{
  font-size:1.05rem;color:var(--txt);
  margin:2px 0 4px;line-height:1.3;
}
.proj-body > p{
  font-size:.86rem;color:var(--txt-3);
  line-height:1.6;flex:1;
}
.proj-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  padding-top:12px;
  border-top:1px solid var(--border);
  margin-top:auto;
}
.proj-stack{
  display:flex;flex-wrap:wrap;gap:5px;
}
.proj-stack span{
  font-size:.7rem;font-weight:600;
  color:var(--txt-3);background:var(--bg-2);
  border:1px solid var(--border);
  padding:3px 8px;border-radius:var(--r-sm);
}
.proj-result{
  font-family:var(--font-d);font-size:.78rem;font-weight:700;
  color:var(--red);white-space:nowrap;
}

/* ── Responsive ─────────────────────────────── */
@media(max-width:1024px){
  .case-study-card{grid-template-columns:1fr}
  .cs-img{min-height:320px}
  .cs-body{padding:34px 28px}
  .cs-img-content h2{font-size:1.5rem}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .case-study-section::before{display:none}
}
@media(max-width:768px){
  .proj-grid{grid-template-columns:1fr;gap:18px}
  .cs-results{grid-template-columns:1fr 1fr;gap:10px}
  .cs-result-item{padding:14px}
  .cs-result-item strong{font-size:1.35rem}
  .filter-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}
  .filter-btn{flex-shrink:0}
}
@media(max-width:480px){
  .cs-body{padding:24px 20px}
  .cs-img-content{padding:20px 22px}
  .cs-img-content h2{font-size:1.2rem}
  .proj-body{padding:16px 18px}
  /* Mobilde overlay her zaman görünür — hover yok */
  .proj-img-overlay{opacity:1;background:linear-gradient(180deg,rgba(15,23,42,0) 55%,rgba(15,23,42,.78) 100%)}
}