/* =============================================================
 * pj.css — SAYFA 3: PROJECT DETAILS (1133:3308)
 * Sayfa-1/2 disiplini: sabit-tasarım hero JS --pd-scale ile ölçeklenir; akış bölümleri
 * .in-container (228 inset); tek kırılım 1000px; 900px altı ortalı. Renk/font tasarımla birebir.
 * ============================================================= */

/* =============================================================
 * HERO (1184:586) — sabit 820×381 sahne
 * ============================================================= */
.pj-hero { padding-top: 68px; }
.pj-hero__scene { position: relative; width: 820px; height: 381px;
  transform-origin: top left; transform: scale(var(--pd-scale, 1)); }
.pj-hero__eyebrow { position: absolute; left: 0; top: 151px; margin: 0;
  font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-body); white-space: nowrap; }
.pj-hero__title { position: absolute; left: 1px; top: 183px; display: inline-flex; align-items: center; padding: 10px;
  background: var(--in-lime); border-bottom: 2px solid var(--in-border);
  font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); white-space: nowrap; }

/* Kod penceresi (1081:1935): 248×157, mor bar, gri metin çizgileri — scale animasyonu */
.pj-hero__code { position: absolute; left: 381px; top: 183px; width: 248px; height: 157px;
  background: #fff; border: 2px solid var(--in-border); box-shadow: var(--in-shadow); overflow: hidden;
  transform-origin: center; animation: pj-code-scale 4s linear infinite; }
.pj-hero__code-bar { position: absolute; left: -2px; top: -2px; width: 248px; height: 48px; background: #8A38F5; border-bottom: 2px solid var(--in-border); }
.pj-hero__ln { position: absolute; height: 14px; background: #f5f5f5; display: block; }
.pj-hero__cstar { position: absolute; left: 462px; top: 169px; width: 35px; height: 35px; display: block; }

/* Klavye (1081:1943): lime-300 zemin 141×50, beyaz tuşlar */
.pj-hero__kbd { position: absolute; left: 432px; top: 331px; width: 141px; height: 50px;
  background: #E8FA8F; border: 1px solid var(--in-black); overflow: hidden; }
.pj-hero__key { position: absolute; display: block; background: #fff; border: 0.5px solid var(--in-black); box-shadow: 0.8px 0.8px 0 0 var(--in-black); }
.pj-hero__key--l { background: var(--in-lime); }
.pj-hero__key--o { background: #FF9466; }

/* Today's Plan penceresi (1081:1962): ~269×203, sağ üst */
.pj-hero__plan { position: absolute; left: 551px; top: 11px; width: 269px; height: 203px;
  background: #fff; border: 2px solid var(--in-border); box-shadow: var(--in-shadow); overflow: hidden; }
.pj-hero__plan-badge { position: absolute; left: 17px; top: 15px; height: 32px; display: inline-flex; align-items: center; padding: 0 10px;
  background: var(--in-orange); border: 2px solid var(--in-black); color: #fff;
  font-family: var(--in-head); font-weight: 700; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; }
/* İlk maddenin (09:00 Morning Stand-up) ÜZERİNİ çizen çizgi — MOR (#8A38F5, tasarım Çizgi), 3px;
   animasyonla soldan sağa büyür (tamamlandı efekti). */
.pj-hero__plan-line { position: absolute; left: 13px; top: 88px; height: 3px; width: 201px; background: #8A38F5; display: block; z-index: 2; }
.pj-hero__plan-line[data-pj-line] { width: 1px; animation: pj-line-grow 4s linear infinite; }
.pj-hero__plan-time { position: absolute; left: 17px; height: 28px; display: flex; align-items: center;
  font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); }
.pj-hero__plan-label { position: absolute; left: 69px; height: 28px; display: flex; align-items: center;
  font-family: var(--in-text); font-weight: 700; font-size: 16px; line-height: 28px; color: var(--in-heading); white-space: nowrap; }
.pj-hero__plan-time.is-anim, .pj-hero__plan-label.is-anim { animation: pj-fade 4s linear infinite; }
/* Plan penceresi sağ-üst köşesinde asılı lime bookmark (1081:1973) */
.pj-hero__bm { position: absolute; left: 793px; top: 0; width: 24px; height: 31px; display: block; z-index: 3; }

@keyframes pj-code-scale { 0%{transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.5,1);} 62.05%,100%{transform:scale(1.098);} }
@keyframes pj-line-grow { 0%{width:1px;} 61.95%,100%{width:201px;} }
@keyframes pj-fade { 0%,57.9%{opacity:1;} 61.95%,100%{opacity:.5;} }
@media (prefers-reduced-motion: reduce){ .pj-hero__code,.pj-hero__plan-line,.pj-hero__plan-time.is-anim,.pj-hero__plan-label.is-anim{ animation:none !important; } }

/* =============================================================
 * WHAT YOU'LL BUILD + KANBAN (1184:585)
 * ============================================================= */
/* Dekorasyon @y0 (54h), başlık @y74 → dekorasyon-başlık arası 20px.
   padding-top 116 = dekorasyon(42) + 54 + 20 boşluk. */
.pj-build { padding-top: 116px; position: relative; }
.pj-build__head { max-width: 827px; }
/* star-lg başlığın sol-üstünde (1184:578 @0,0), star-sm sağ-altta (1133:4150 @795,523). */
.pj-build__star { position: absolute; display: block; z-index: 2; }
.pj-build__star--lg { width: 54px; height: 54px; left: clamp(24px,17.8vw,228px); top: 42px; }
.pj-build__star--sm { width: 32px; height: 32px; left: calc(clamp(24px,17.8vw,228px) + 795px); top: 639px; }
/* Kanban: 4 sütun × 198px, 12px aralık (left 0/210/419/629 → ~12px gap) */
.pj-kanban { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 198px); gap: 11px; justify-content: start; }
.kcol { display: flex; flex-direction: column; gap: 8px; }
.kcol__head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 12px 8px;
  background: var(--in-card-accent); border: 1px solid var(--in-border);
  font-family: var(--in-head); font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.08px; color: var(--in-heading); }
.kcol__bar { width: 8px; height: 28px; border: 1px solid var(--in-black); flex: 0 0 auto; display: block; }
.kcol__bar--todo { background: #E3DDD2; }
.kcol__bar--prog { background: var(--in-orange); }
.kcol__bar--rev  { background: #8A38F5; }
.kcol__bar--done { background: #E8FA8F; }
.kcard { min-height: 39px; display: flex; align-items: center; padding: 8px;
  background: var(--in-card-accent); border: 1px solid #E3DDD2;
  font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-black); }
/* "+N" özet kartı — sütunda KCARD_LIMIT'ten fazla görev olduğunda son kart yerine gösterilir
   (bkz. project-detail.php). Gerçek bir görev değil, sayaç olduğu belli olsun diye kesikli
   kenarlık + ortalı + soluk renk (normal kart deseninden bilinçli olarak farklı). */
.kcard--more { justify-content: center; background: transparent; border: 1px dashed var(--in-border);
  color: var(--in-muted); font-weight: 500; }
.pj-build__note { position: relative; margin: 24px 0 0; padding-left: 12px; max-width: 798px;
  border-left: 3px solid var(--in-orange);
  font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-muted); }

/* =============================================================
 * PROJECT TIMELINE / GANTT (1184:593) — 7 hafta sütunu, ilk sütun 182px, her hafta 92px
 * ============================================================= */
.pj-timeline { padding-top: 90px; }
.pj-gantt { margin-top: 40px; width: 827px; max-width: 100%; border: 1px solid var(--in-border); }
.pj-gantt__weeks { display: grid; grid-template-columns: 182px repeat(7, 1fr); height: 42px;
  background: var(--in-card-accent); border-bottom: 1px solid var(--in-border); }
.pj-gantt__wlabel { border-right: 1px solid #E3DDD2; }
.pj-gantt__wk { display: flex; align-items: center; justify-content: center; border-right: 1px solid #E3DDD2;
  font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); }
.pj-gantt__wk:last-child { border-right: 0; }
.pj-gantt__row { position: relative; display: grid; grid-template-columns: 182px repeat(7, 1fr); height: 54px;
  background: var(--in-card-accent); border-bottom: 1px solid #E3DDD2; align-items: center; }
.pj-gantt__row.is-alt { background: var(--in-card-fill); }
.pj-gantt__row:last-child { border-bottom: 0; }
.pj-gantt__name { padding-left: 17px; font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); white-space: nowrap; }
/* Bar: hafta sütununa göre konumlanır. Grid içinde --col..--col+span. */
.pj-gantt__bar { position: absolute; top: 50%; transform: translateY(-50%); height: 31px;
  border: 2px solid var(--in-border); box-shadow: var(--in-shadow-sm);
  left: calc(182px + (var(--col) - 1) * ((100% - 182px) / 7));
  width: calc(var(--span) * ((100% - 182px) / 7)); }
.pj-gantt__bar--done { background: #E8FA8F; }
.pj-gantt__bar--prog { background: var(--in-orange); }
.pj-gantt__bar--upcoming { background: #E3DDD2; }
.pj-gantt__legend { display: flex; gap: 24px; margin-top: 28px; }
.pj-leg { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-body); }
.pj-leg__chip { width: 14px; height: 14px; border: 1px solid var(--in-border); box-shadow: 1px 1px 0 0 var(--in-black); display: block; }
.pj-leg__chip--done { background: #E8FA8F; }
.pj-leg__chip--prog { background: var(--in-orange); }
.pj-leg__chip--upcoming { background: #E3DDD2; }

/* =============================================================
 * WHAT YOU'LL WALK AWAY WITH (1220:1208) — 5 deliverable satırı (827×54)
 * ============================================================= */
.pj-walk { padding-top: 90px; }
.pj-walk__list { margin-top: 40px; display: flex; flex-direction: column; gap: 10px; max-width: 827px; }
.drow { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 9px;
  background: var(--in-card-fill); border: 1px solid var(--in-border); position: relative;
  transition: box-shadow .1s, transform .08s; }
/* Yıldız: tasarımın iki SVG'si (26×26, gölge baked). Default lime-gölge, hover turuncu-gölge.
   İki resim üst üste; hover'da görünürlük değişir (drop-shadow renkleri SVG içinde). */
.drow__star { position: relative; width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.drow__star img { position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: block; }
.drow__star-b { opacity: 0; }
.drow__t { font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); transition: color .1s; }
/* HOVER (1212:1184): satırda 2px gölge, yıldız turuncu-gölgeli varyanta geçer, metin koyulaşır */
.drow:hover { box-shadow: var(--in-shadow-sm); transform: translate(-1px,-1px); }
.drow:hover .drow__star-a { opacity: 0; }
.drow:hover .drow__star-b { opacity: 1; }
.drow:hover .drow__t { color: var(--in-heading); }

/* =============================================================
 * GUIDANCE AND TOOLS (1220:1226) — mentor kartı + 3 TECH STACK penceresi + dekoratif noktalar
 * Sağ taraf serbest yerleşim (mutlak x/y); stage 829×564.
 * ============================================================= */
.pj-guide { padding-top: 90px; }
.pj-guide__stage { position: relative; width: 100%; max-width: 829px; min-height: 564px; }
.pj-guide__dot { position: absolute; width: 42px; height: 54px; display: block; z-index: 2; }
.pj-guide__dot--tl { left: 0; top: -64px; }
.pj-guide__dot--br { right: 1px; bottom: -30px; }
/* Header tek satırda kalsın (tasarımda lead geniş, mentora binmesin) → geniş max-width */
.pj-guide .pd-sec-head { position: absolute; left: 0; top: 74px; max-width: 720px; }
/* Mentor kartı: sol, y=162 (stage-göreli) */
.pj-guide__mentor { position: absolute; left: 0; top: 162px; }
/* TECH STACK pencereleri (196×122) — tasarım konumları */
.tstack { position: absolute; width: 196px; min-height: 122px; background: #fff; border: 2px solid var(--in-border);
  transition: box-shadow .1s, transform .08s; }
.tstack--a { left: 381px; top: 190px; }
.tstack--c { left: 508px; top: 368px; }
.tstack--b { left: 632px; top: 209px; }
/* HOVER (1201:590): 4px gölge, başlık barı lime */
.tstack:hover { box-shadow: var(--in-shadow); transform: translate(-2px,-2px); z-index: 4; }
.tstack:hover .tstack__bar { background: var(--in-lime); }
.tstack__bar { height: 36px; margin: -0px -0px 0; background: var(--in-card-accent); border-bottom: 2px solid var(--in-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  transition: background .12s;
  font-family: var(--in-head); font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.07px; color: var(--in-heading); }
.tstack__bar img { width: 14px; height: 18px; display: block; }
.tstack__list { list-style: none; margin: 0; padding: 9px 0 12px; }
.tstack__list li { position: relative; padding: 0 12px 0 25px; height: 24px; display: flex; align-items: center;
  font-family: var(--in-text); font-weight: 500; font-size: 12px; line-height: 18px; color: var(--in-body); }
.tstack__list li::before { content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--in-orange); border: 1px solid var(--in-black); }

/* =============================================================
 * GUIDANCE — GRID MODU (3'ten fazla kategori): absolute serpme yerine akan
 * düzen. Header üstte; altında mentör + tech stack kartları responsive grid.
 * Üst üste binme olmaz; kart boyutu (196px) sabit kalır, sadece dizilim akar.
 * ============================================================= */
.pj-guide--grid .pj-guide__stage { min-height: 0; display: flex; flex-direction: column; gap: 28px; max-width: 829px; }
.pj-guide--grid .pj-guide__dot { display: none; }
.pj-guide--grid .pd-sec-head { position: static; max-width: 100%; }
/* Mentör + kartlar tek akan satır: mentör sabit genişlik, kartlar auto-fill grid.
   NOT: .mcard position:relative KALMALI (içindeki foto ona göre konumlanır); sadece
   absolute-serpme konumunu (left/top) sıfırlıyoruz. */
.pj-guide--grid .pj-guide__mentor { position: relative; left: auto; top: auto; flex: 0 0 auto; }
.pj-guide--grid .pj-guide__body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.pj-guide--grid .pj-guide__tools { display: grid; grid-template-columns: repeat(auto-fill, 196px); gap: 20px;
  flex: 1 1 420px; align-content: flex-start; }
.pj-guide--grid .tstack { position: static; left: auto; top: auto; width: 196px; }
@media (max-width: 900px){
  .pj-guide--grid .pj-guide__body { flex-direction: column; align-items: center; }
  .pj-guide--grid .pj-guide__tools { justify-content: center; }
}

/* =============================================================
 * CTA — READY TO BUILD IT? (1188:594) — sol hizalı, 469 genişlik
 * ============================================================= */
/* CTA sabit 469×186 sahne — mutlak konumlar (title0, text30, hl86, buton136) */
.pj-cta { padding-top: 96px; padding-bottom: 96px; }
.pj-cta__stage { position: relative; width: 469px; max-width: 100%; height: 186px; }
.pj-cta__title { position: absolute; left: 0; top: 0; margin: 0; font-family: var(--in-head); font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.1px; color: var(--in-heading); }
.pj-cta__text { position: absolute; left: 0; top: 30px; width: 469px; margin: 0; font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-body); }
.pj-cta__hl { position: absolute; left: 196px; top: 86px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px;
  background: var(--in-lime); border-bottom: 2px solid var(--in-border);
  font-family: var(--in-text); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--in-heading); white-space: nowrap; }
.pj-cta__btn { position: absolute; left: 0; top: 136px; }

/* =============================================================
 * RESPONSIVE — tek kırılım 1000px + 900 altı ortalama
 * ============================================================= */
/* ============ 1000px ALTI: her şey ORTALI (Sayfa 1/2 disiplini) ============ */
@media (max-width: 1000px){
  /* Tüm bölüm başlıkları ortalı */
  .pd-sec-head { text-align: center; margin-inline: auto; max-width: 100%; }

  /* HERO mobil: 820 sahne ORTALANIR sonra origin-center ölçeklenir; taşma .pj-hero clip.
     Görünen (ölçekli) içerik tam ortalı → sağ/sol boş asimetri olmaz. */
  .pj-hero { padding-top: 30px; overflow: hidden; }
  .pj-hero__scene { left: 50%; transform-origin: top center;
    transform: translateX(-50%) scale(var(--pd-scale, 1)); }

  /* WHAT YOU'LL BUILD */
  .pj-build { padding-top: 60px; }
  .pj-build__star, .pj-build__star--lg, .pj-build__star--sm { display: none !important; }
  .pj-kanban { grid-template-columns: repeat(2, 198px); gap: 11px; justify-content: center; }
  .pj-build__note { margin-inline: auto; text-align: center; border-left: 0; padding-left: 0; }

  /* TIMELINE ortalı; gantt dar ekranda yatay kaydırılır */
  .pj-timeline { padding-top: 60px; }
  .pj-gantt { margin-inline: auto; overflow-x: auto; }
  .pj-gantt__legend { justify-content: center; }

  /* WALK AWAY: satır listesi ortalı kolon */
  .pj-walk { padding-top: 60px; }
  .pj-walk__list { margin-inline: auto; }

  /* GUIDANCE: serbest yerleşim çöz → dikey, ORTALI akış */
  .pj-guide { padding-top: 60px; }
  .pj-guide__stage { min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .pj-guide__dot { display: none; }
  .pj-guide .pd-sec-head { position: static; max-width: 100%; }
  .pj-guide__mentor { position: relative; left: auto; top: auto; width: 265px; height: 306px; flex: 0 0 auto; text-align: left; }
  .tstack { position: relative; left: auto; top: auto; text-align: left; }

  /* CTA: mutlak konumları çöz, dikey ORTALI */
  .pj-cta { padding-top: 60px; padding-bottom: 70px; }
  .pj-cta__stage { position: static; width: auto; max-width: 469px; height: auto; margin-inline: auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; }
  .pj-cta__title, .pj-cta__text, .pj-cta__hl, .pj-cta__btn { position: static; left: auto; top: auto; width: auto; }
  .pj-cta__text { margin-top: 16px; }
  .pj-cta__hl { margin-top: 14px; }
  .pj-cta__btn { margin-top: 22px; }
}
@media (max-width: 520px){
  .pj-kanban { grid-template-columns: 198px; }
}

/* =============================================================
 * PROJECT TIMELINE — CHECKLIST tipi (progress_type=checklist)
 * Haftalık gantt yerine zaman içermeyen durum kartları. Neobrutalist:
 * 827px içerik, kalın border + sert gölge, sol renkli işaret (done→lime yıldız,
 * diğerleri numaralı), sağda status pill (kanban renk dili).
 * ============================================================= */
.pj-checklist { margin-top: 40px; width: 827px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.pj-check { display: flex; align-items: center; gap: 18px; background: var(--in-card);
  border: 2px solid var(--in-border); box-shadow: var(--in-shadow-sm); padding: 16px 20px;
  transition: transform .1s, box-shadow .1s; }
.pj-check:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 0 var(--in-border); }
/* Sol renkli işaret kutusu — status'e göre zemin (kanban dili) */
.pj-check__mark { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--in-border); background: var(--in-card-fill); }
.pj-check__mark img { width: 22px; height: 22px; display: block; }
.pj-check__no { font-family: var(--in-head); font-weight: 700; font-size: 16px; color: var(--in-heading); line-height: 1; }
.pj-check--todo        .pj-check__mark { background: #E3DDD2; }
.pj-check--in_progress .pj-check__mark { background: var(--in-orange); }
.pj-check--in_review   .pj-check__mark { background: #8A38F5; }
.pj-check--in_review   .pj-check__no  { color: #fff; }
.pj-check--done        .pj-check__mark { background: var(--in-lime); }
/* Gövde */
.pj-check__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.pj-check__name { font-family: var(--in-head); font-weight: 600; font-size: 16px; line-height: 24px;
  letter-spacing: -0.08px; color: var(--in-heading); }
.pj-check__desc { font-family: var(--in-text); font-weight: 400; font-size: 14px; line-height: 22px; color: var(--in-body); }
/* Sağ durum etiketi (pill) — kanban renkleriyle */
.pj-check__pill { flex: 0 0 auto; font-family: var(--in-text); font-weight: 600; font-size: 12px; line-height: 1;
  padding: 7px 12px; border: 2px solid var(--in-border); white-space: nowrap; }
.pj-check__pill--todo        { background: #E3DDD2; color: var(--in-heading); }
.pj-check__pill--in_progress { background: var(--in-orange); color: var(--in-heading); }
.pj-check__pill--in_review   { background: #8A38F5; color: #fff; }
.pj-check__pill--done        { background: var(--in-lime); color: var(--in-heading); }
@media (max-width: 900px){
  .pj-checklist { margin-inline: auto; }
}
@media (max-width: 560px){
  .pj-check { flex-wrap: wrap; gap: 12px; }
  .pj-check__body { flex-basis: calc(100% - 62px); }
  .pj-check__pill { margin-left: 62px; }
}