/* =====================================================================
   fe-refs.css — Referanslar: "dönüşüm hattı"
   Her satır bir proje; solda önce→sonra eğrisi, sağda ekran görüntüsü.
   ===================================================================== */

/* ---------- Sektör çubuğu ---------- */
.dn-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.dn-bar-lbl{
  font:700 .7rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);flex:none;
}
.dn-bar .sector-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.sector-filters .pill em{font-style:normal;font-size:.74em;opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}

/* ---------- Liste ---------- */
.dn-list{list-style:none;padding:0;margin:0}
/* Süzgeç JS satırlara hidden koyar; .dn-row'a display verilirse bu kural şart olur. */
.dn-list > li[hidden]{display:none}
.dn-row{
  position:relative;padding:34px 0 30px;border-bottom:1px solid var(--line);
}
.dn-row:last-child{border-bottom:0}
/* Satırları birbirine bağlayan dikey hat — "hat" hissi */
.dn-row::before{
  content:"";position:absolute;left:17px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.dn-row:first-child::before{top:34px}
.dn-row:last-child::before{bottom:auto;height:34px}

/* ---------- Başlık satırı ---------- */
.dn-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;margin-bottom:22px}
.dn-no{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;z-index:1;
  font:800 .78rem var(--font-mono);color:var(--brand);
  background:var(--bg);border:1px solid var(--brand-200);
}
.dn-id h2{font:800 1.24rem/1.25 var(--font-display);color:var(--ink);margin:0 0 4px}
.dn-id h2 a{color:inherit;text-decoration:none}
.dn-id h2 a:hover{color:var(--brand)}
.dn-id p{font-size:.86rem;line-height:1.55;color:var(--muted);max-width:60ch;margin:0}
.dn-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dn-tags span{
  font:600 .66rem var(--font-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--brand);background:var(--brand-050);border-radius:var(--r-pill);padding:4px 10px;
}

/* ---------- Gövde: dönüşüm + görsel ---------- */
.dn-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:26px;align-items:center;padding-left:52px}

/* Gövde: solda ürün sahnesi (canvas), sağda özet + teknoloji + bağlantı */
.dn-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;align-items:center;padding-left:52px}

.dn-scene{
  display:block;position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(145deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  transition:transform .24s var(--ease),box-shadow .24s;
}
.dn-scene::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 15%,rgba(139,92,246,.22),transparent 62%);
}
.dn-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dn-row:hover .dn-scene{transform:translateY(-3px);box-shadow:var(--sh-lg)}

.dn-say{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.dn-ozet{
  font:600 1.12rem/1.65 var(--font-display);color:var(--ink);margin:0;
  letter-spacing:-.008em;max-width:46ch;
}

/* ---------- Teknoloji rozetleri ---------- */
.dn-stack{display:flex;gap:7px;flex-wrap:wrap}
.dn-stack span{
  font:600 .7rem var(--font-mono);color:var(--muted);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;
}
[data-theme="dark"] .dn-stack span{background:rgba(255,255,255,.04);border-color:var(--line)}

/* ---------- KOYU MOD ---------- */
[data-theme="dark"] .dn,
[data-theme="dark"] .dn-plain{background:rgba(255,255,255,.03);border-color:var(--line)}
[data-theme="dark"] .dn-no{background:var(--bg);border-color:rgba(127,176,255,.34);color:#7fb0ff}
[data-theme="dark"] .dn-tags span{background:rgba(37,99,235,.16);color:#7fb0ff}
[data-theme="dark"] .dn-shot{background:rgba(255,255,255,.03)}

/* ---------- DUYARLILIK ---------- */
@media (max-width:940px){
  .dn-main{grid-template-columns:minmax(0,1fr);gap:18px;padding-left:0}
  .dn-head{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .dn-tags{grid-column:2;justify-content:flex-start;margin-top:2px}
  .dn-row::before{display:none}
  .dn-shot{aspect-ratio:16/9}
}
@media (max-width:560px){
  .dn-row{padding:26px 0 24px}
  .dn-id h2{font-size:1.08rem}
  .dn-ozet{font-size:1rem;max-width:none}
  .dn-say{gap:13px}
  .dn-bar{gap:10px}
}