/* Proje detay sayfaları — style.css'in üzerine */
.detail-page .bar nav a:first-child{display:inline}

.p-head{max-width:var(--max);margin:0 auto;padding:clamp(110px,16vw,170px) var(--pad) clamp(32px,5vw,56px)}
.p-head .lv{display:block;margin-bottom:10px}
.p-head h1{font-size:clamp(3.2rem,12vw,9rem)}
.pitch{font:500 clamp(1.15rem,2.4vw,1.7rem)/1.35 'Instrument Sans',sans-serif;max-width:34em;margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:2px solid var(--edge);border-left:2px solid var(--edge);margin-top:clamp(28px,4vw,44px)}
.facts div{padding:14px 16px;border-right:2px solid var(--edge);border-bottom:2px solid var(--edge)}
.facts dt{color:var(--accent);margin-bottom:4px}
.facts dd{font-weight:600}
.p-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* medya */
.cover{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.media{position:relative;border:2px solid var(--edge);background:var(--surface);overflow:hidden}
.media img,.media video,.media canvas{display:block;width:100%;height:auto}
.media img{cursor:zoom-in}
.cover .media{aspect-ratio:16/9}
.cover .media img,.cover .media video,.cover .media canvas{height:100%;object-fit:cover;image-rendering:auto}
.cover .media canvas{image-rendering:pixelated}
.media.empty{display:grid;place-items:center;aspect-ratio:16/9;border-style:dashed;padding:16px;text-align:center;color:var(--muted)}
.media.empty span{font-family:'JetBrains Mono',monospace;font-size:.75rem;overflow-wrap:anywhere}
.media.empty b{display:block;font:900 1.4rem 'Big Shoulders Display',sans-serif;text-transform:uppercase;color:var(--text);margin-bottom:6px}

/* sistemler */
.systems{counter-reset:sys}
.sys{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,56px);padding:clamp(32px,5vw,56px) 0;border-top:2px solid var(--edge)}
.sys:last-child{border-bottom:2px solid var(--edge)}
/* Yerleşim açıkça belirtilir: metin ve görsel 1. satırda, kod 2. satırda. Çift sıradaki sistemlerde yan yana yer değiştirir. */
.sys-text{grid-column:1;grid-row:1}
.sys>.media{grid-column:2;grid-row:1}
.sys:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.sys:nth-child(even) .sys-text{grid-column:2}
.sys:nth-child(even)>.media{grid-column:1}
.sys.no-media{grid-template-columns:minmax(0,1fr)}
.sys.no-media .sys-text{grid-column:1/-1}
.sys-num{color:var(--accent);display:block;margin-bottom:8px}
.sys h3{margin-bottom:14px}
.sys-text>p{color:var(--muted)}
.sys-text ul{margin-top:12px}
.sys-text li{position:relative;padding-left:22px;margin:7px 0;color:var(--muted)}
.sys-text li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--teal)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font:500 .72rem 'JetBrains Mono',monospace;padding:4px 8px;border:1.5px solid var(--edge)}
.sys .code-wrap{grid-column:1/-1;grid-row:2}
.sys>.media{align-self:start}

/* kod */
.code-wrap{border:2px solid var(--edge);background:#07090c;box-shadow:6px 6px 0 var(--accent)}
.code-wrap.empty{background:transparent;box-shadow:none;border-style:dashed;padding:14px 16px;color:var(--muted);font:400 .75rem 'JetBrains Mono',monospace;overflow-wrap:anywhere}
.code-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid #28323f;color:#8d9aab;text-transform:none}
.code-head button{background:none;border:1px solid #3a4756;color:#e7edf3;font:inherit;padding:3px 10px;cursor:pointer}
.code-head button:hover{border-color:var(--accent)}
.code-wrap pre{margin:0;padding:16px;max-height:440px;overflow:auto;font:400 .82rem/1.6 'JetBrains Mono',monospace;color:#e7edf3;tab-size:4;background:none!important}
.code-wrap pre code{font:inherit;background:none!important;text-shadow:none!important;color:inherit}
.code-wrap.open pre{max-height:none}
/* sözdizimi renkleri */
.token.comment,.token.prolog{color:#5f6f82;font-style:italic}
.token.keyword,.token.boolean{color:#ff6a4d}
.token.string,.token.char{color:#c6f23f}
.token.class-name,.token.namespace{color:#f2b84b}
.token.number{color:#ffa28d}
.token.function{color:#ffffff;font-weight:500}
.token.punctuation,.token.operator{color:#8d9aab}

/* galeri */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}

/* önceki / sonraki */
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--edge)}
.pager a{display:block;padding:clamp(22px,4vw,40px) var(--pad);text-decoration:none}
.pager a+a{border-left:2px solid var(--edge);text-align:right}
.pager span{display:block;color:var(--muted)}
.pager b{font:900 clamp(1.4rem,4vw,2.6rem)/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.pager a:hover{background:var(--text);color:var(--bg)}
.pager a:hover span{color:var(--accent)}

/* büyütme */
.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;margin:auto}
.lb::backdrop{background:rgba(7,9,12,.92)}
.lb img{display:block;max-width:96vw;max-height:88vh;border:2px solid var(--edge)}
.lb button{display:block;margin:10px auto 0;background:var(--text);color:var(--bg);border:0;padding:8px 16px;font:600 .9rem 'Instrument Sans',sans-serif;cursor:pointer}

@media (max-width:820px){
  .sys,.sys:nth-child(even),.sys.no-media{grid-template-columns:minmax(0,1fr)}
  .sys .sys-text,.sys:nth-child(even) .sys-text{grid-column:1;grid-row:1}
  .sys>.media,.sys:nth-child(even)>.media{grid-column:1;grid-row:2}
  .sys .code-wrap{grid-row:3}
  .sys.no-media .code-wrap{grid-row:2}
}
@media (max-width:520px){
  .pager{grid-template-columns:1fr}
  .pager a+a{border-left:0;border-top:2px solid var(--edge)}
}

.p-note{max-width:44em;color:var(--muted);margin:-12px 0 28px;border-left:3px solid var(--accent);padding-left:14px}