/* What if Next Lab paneli — Nexo teması.
   Renkler Nexo'nun resmî tasarımından: mor gövde, turkuaz tüyler, kanattaki altın soru işaretleri, galaksi camı.
   Akılda kalan öğe: proje durumu Nexo'nun gözlüğüyle gösterilir (sol cam long, sağ cam Shorts; bitince galaksi). */

:root {
  --gece: #1b1446;
  --gece-2: #251b5e;
  --gece-3: #31267a;
  --mor: #4e3a9b;
  --mor-koyu: #3d2d80;
  --mor-acik: #ece8fb;
  --turkuaz: #2da4ae;
  --turkuaz-koyu: #1f7f88;
  --turkuaz-acik: #e2f5f6;
  --altin: #e3a23b;
  --altin-koyu: #9a6611;
  --altin-acik: #fcf1dc;
  --kirmizi: #c8414f;
  --kirmizi-acik: #fbe9eb;
  --zemin: #f4f2fa;
  --kart: #ffffff;
  --murekkep: #1f1a3a;
  --sis: #6a648a;
  --sis-2: #9a95b4;
  --cizgi: #e3dff0;
  --cizgi-2: #d3cde8;
  --golge: 0 1px 2px rgba(27, 20, 70, .06), 0 8px 24px -12px rgba(27, 20, 70, .18);
  --baslik: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --govde: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-buyuk: 20px;
  --r: 12px;
  --r-kucuk: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 15px/1.55 var(--govde); -webkit-font-smoothing: antialiased;
}
a { color: var(--mor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--baslik); margin: 0; line-height: 1.15; letter-spacing: -.01em; color: var(--murekkep); }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 22px; font-weight: 650; }
h3 { font-size: 17px; font-weight: 650; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--turkuaz); outline-offset: 2px; border-radius: 6px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- iskelet */
.iskelet { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.kenar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background:
    radial-gradient(1px 1px at 22% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 82% 78%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px at 12% 88%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(120% 60% at 0% 0%, #2a1f6d 0%, transparent 60%),
    var(--gece);
  color: #d9d4f2; display: flex; flex-direction: column; padding: 22px 16px 18px;
}
.marka { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; text-decoration: none; color: #fff; }
.marka .logo { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(45,164,174,.35), 0 6px 18px rgba(0,0,0,.35); }
.marka .logo img { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Nexo'nun normal gözü ara sıra kırpar: üst ve alt kapak gözün ortasında buluşur */
.logo .kapak { position: absolute; left: 20.9%; top: 33.4%; width: 23.4%; height: 23.4%; border-radius: 50%; overflow: hidden; pointer-events: none; }
.logo .kapak::before, .logo .kapak::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; background: #fff; transform: scaleY(0); animation: kirp 6.4s infinite; }
.logo .kapak::before { top: 0; transform-origin: top; box-shadow: inset 0 -1px 0 var(--mor); }
.logo .kapak::after { bottom: 0; transform-origin: bottom; box-shadow: inset 0 1px 0 var(--mor); }
@keyframes kirp {
  0%, 62%, 66.5%, 68%, 93%, 97%, 100% { transform: scaleY(0); }
  64%, 95% { transform: scaleY(1); }
}
.marka:hover .kapak::before, .marka:hover .kapak::after { animation-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { .logo .kapak::before, .logo .kapak::after { animation: none; } }
.marka b { display: block; font-family: var(--baslik); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.marka span { display: block; font-size: 12.5px; color: #a79fd6; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #cfc9ee; text-decoration: none; font-weight: 500;
}
.menu a svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu a[aria-current="page"] { background: var(--gece-3); color: #fff; box-shadow: inset 3px 0 0 var(--turkuaz); }
.menu .rozet { margin-left: auto; background: var(--altin); color: #2b1c00; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.kenar-alt { margin-top: auto; padding-top: 18px; }
.servis-liste { display: grid; gap: 8px; padding: 14px 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.servis-liste h4 { color: #a79fd6; font: 600 12.5px var(--govde); margin-bottom: 2px; }
.servis { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #e4e0f7; }
.servis small { display: block; color: #a39cc9; font-size: 12px; line-height: 1.3; }
.nokta { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--turkuaz); box-shadow: 0 0 0 3px rgba(45,164,174,.22); }
.nokta.hata { background: #ff6b7a; box-shadow: 0 0 0 3px rgba(255,107,122,.22); }
.nokta.kapali { background: #6c6593; box-shadow: none; }
.cikis { display: block; margin-top: 12px; padding: 8px 12px; color: #a79fd6; font-size: 13.5px; text-decoration: none; border-radius: 8px; }
.cikis:hover { color: #fff; background: rgba(255,255,255,.05); }

.ana { padding: 34px 44px 64px; max-width: 1240px; width: 100%; min-width: 0; }
.proje-govde > *, .pano > * { min-width: 0; }
.sayfa-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.sayfa-bas p { color: var(--sis); margin-top: 6px; max-width: 62ch; }
.mobil-bas { display: none; }

/* ---------- düğmeler ve formlar */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px;
  padding: 0 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  font: 600 14.5px var(--govde); text-decoration: none; white-space: nowrap;
  background: var(--mor); color: #fff; transition: background .15s, transform .05s;
}
.dugme:hover { background: var(--mor-koyu); }
.dugme:active { transform: translateY(1px); }
.dugme svg { width: 18px; height: 18px; }
.dugme.ikincil { background: var(--kart); color: var(--murekkep); border-color: var(--cizgi-2); }
.dugme.ikincil:hover { background: var(--mor-acik); border-color: #c7bff0; }
.dugme.turkuaz { background: var(--turkuaz); }
.dugme.turkuaz:hover { background: var(--turkuaz-koyu); }
.dugme.altin { background: var(--altin); color: #2b1c00; }
.dugme.altin:hover { background: #d18f27; }
.dugme.tehlike { background: var(--kart); color: var(--kirmizi); border-color: #efc5ca; }
.dugme.tehlike:hover { background: var(--kirmizi-acik); }
.dugme.kucuk { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.dugme.buyuk { min-height: 50px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.dugme[disabled] { opacity: .5; cursor: not-allowed; }
.dugmeler { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ipucu { color: var(--sis); font-size: 13px; font-weight: 400; margin-top: 4px; }
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; padding: 10px 12px; border-radius: var(--r-kucuk); border: 1px solid var(--cizgi-2);
  background: #fff; color: var(--murekkep); font: 15px/1.5 var(--govde);
}
textarea { resize: vertical; min-height: 96px; }
input[type=file] { font: 14px var(--govde); color: var(--sis); padding: 6px; border: 1px dashed var(--cizgi-2); border-radius: var(--r-kucuk); background: #fff; max-width: 100%; }
input[type=file]::file-selector-button { font: 600 13px var(--govde); color: var(--mor); background: var(--zemin); border: 1px solid var(--cizgi-2); border-radius: 8px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mor); box-shadow: 0 0 0 3px rgba(78,58,155,.15); }
.alan { margin-bottom: 18px; }
.secim { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; margin-bottom: 10px; }
.secim input { width: 18px; height: 18px; accent-color: var(--mor); }
.sayac { float: right; color: var(--sis-2); font-weight: 500; font-size: 12.5px; }
.sayac.asim { color: var(--kirmizi); }

/* ---------- yüzeyler */
.yuzey { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: 24px; }
.yuzey + .yuzey { margin-top: 20px; }
.yuzey-bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.yuzey-bas p { color: var(--sis); font-size: 14px; margin-top: 4px; }
.izgara-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.uyari { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); font-size: 14.5px; margin-bottom: 18px; }
.uyari svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.uyari.bilgi { background: var(--turkuaz-acik); color: #134f55; }
.uyari.dikkat { background: var(--altin-acik); color: #5a3a05; }
.uyari.hata { background: var(--kirmizi-acik); color: #7a1d28; }
.uyari .dugmeler { margin-top: 10px; }
.bos { text-align: center; padding: 48px 20px; color: var(--sis); }
.bos img { width: 132px; margin: 0 auto 16px; filter: drop-shadow(0 10px 18px rgba(27,20,70,.18)); }
.bos h3 { margin-bottom: 6px; color: var(--murekkep); }
.bos .dugmeler { justify-content: center; margin-top: 18px; }

/* ---------- durum etiketleri */
.etiket { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.etiket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiket.onay { background: var(--altin-acik); color: var(--altin-koyu); }
.etiket.calisiyor { background: var(--mor-acik); color: var(--mor); }
.etiket.calisiyor::before { animation: nabiz 1.4s ease-in-out infinite; }
.etiket.hazir { background: var(--turkuaz-acik); color: var(--turkuaz-koyu); }
.etiket.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.etiket.bekle { background: #eeedf4; color: var(--sis); }
@keyframes nabiz { 50% { opacity: .3; } }

/* ---------- Nexo gözlüğü: proje ilerlemesi */
.gozluk { display: inline-flex; align-items: center; gap: 0; --boy: 46px; }
.gozluk .kopru { width: calc(var(--boy) * .26); height: calc(var(--boy) * .09); background: #8d88a6; border-radius: 4px; margin: 0 -2px; z-index: 1; }
.cam {
  --y: 0; position: relative; width: var(--boy); height: var(--boy); border-radius: 50%;
  background: conic-gradient(var(--turkuaz) calc(var(--y) * 1%), #dcd8ea 0);
  display: grid; place-items: center;
}
.cam::after {
  content: ""; width: 78%; height: 78%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff 0 36%, #f1eff8 37%);
  box-shadow: inset 0 0 0 2px #b9b4cc;
}
.cam.dolu::after {
  background:
    radial-gradient(1px 1px at 30% 35%, #fff, transparent 70%),
    radial-gradient(1px 1px at 68% 62%, #fff, transparent 70%),
    radial-gradient(1.2px 1.2px at 58% 28%, #fff, transparent 70%),
    radial-gradient(circle at 50% 50%, #c9fbf6 0 6%, rgba(122,214,220,.85) 14%, transparent 34%),
    conic-gradient(from 30deg at 50% 50%, #3b2a86, #9b4fb8, #2da4ae, #23195e, #b05aa8, #3b2a86);
  box-shadow: inset 0 0 0 2px #8d88a6, inset 0 0 12px rgba(0,0,0,.45);
  animation: galaksi 18s linear infinite;
}
.cam.calisiyor { background: conic-gradient(var(--mor) calc(var(--y) * 1%), #dcd8ea 0); }
.cam.onay { background: conic-gradient(var(--altin) calc(var(--y) * 1%), #dcd8ea 0); }
.gozluk.buyuk { --boy: 78px; }
@keyframes galaksi { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cam.dolu::after, .etiket.calisiyor::before { animation: none; } }

/* ---------- pano */
.pano { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.bekleyen { display: grid; gap: 12px; }
.bekleyen a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border-radius: var(--r); background: var(--altin-acik); border: 1px solid #f3dcae;
  color: var(--murekkep); text-decoration: none;
}
.bekleyen a:hover { border-color: var(--altin); }
.bekleyen .soru { width: 38px; height: 38px; border-radius: 50%; background: var(--altin); color: #2b1c00; display: grid; place-items: center; font: 800 20px var(--baslik); }
.bekleyen b { display: block; font-weight: 650; }
.bekleyen span { color: #7b5a1d; font-size: 13.5px; }
.akis { list-style: none; margin: 0; padding: 0; }
.akis li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.akis li:last-child { border-bottom: 0; }
.akis li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi-2); margin-top: 7px; }
.akis li.onay::before { background: var(--altin); }
.akis li.hata::before { background: var(--kirmizi); }
.akis li.hazir::before { background: var(--turkuaz); }
.akis time { display: block; color: var(--sis-2); font-size: 12.5px; }

.isler-mini { display: grid; gap: 14px; }
.is-satir { display: grid; gap: 6px; }
.is-satir .ust { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.is-satir .ust b { font-weight: 600; }
.is-satir .ust span { color: var(--sis); font-size: 13px; white-space: nowrap; }
.cubuk { height: 6px; border-radius: 999px; background: #e7e4f2; overflow: hidden; }
.cubuk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mor), var(--turkuaz)); }
.cubuk.belirsiz i { width: 35% !important; animation: kayan 1.6s ease-in-out infinite; }
@keyframes kayan { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------- proje kartları */
.kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.kart {
  display: flex; flex-direction: column; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk);
  overflow: hidden; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.kart:hover { border-color: #c9c1ef; box-shadow: var(--golge); }
.kart .gorsel { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--gece-2), var(--mor)); position: relative; }
.kart .gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kart .gorsel .yer { position: absolute; inset: 0; display: grid; place-items: center; }
.kart .gorsel .yer img { width: 64px; height: 64px; opacity: .9; border-radius: 50%; }
.kart .govde { padding: 16px 18px 18px; display: grid; gap: 12px; flex: 1; }
.kart h3 { font-size: 16.5px; line-height: 1.3; }
.kart .alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.kart .alt small { color: var(--sis-2); font-size: 12.5px; }

.filtreler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.filtreler a { padding: 7px 14px; border-radius: 999px; color: var(--sis); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.filtreler a:hover { color: var(--murekkep); background: #fff; }
.filtreler a[aria-current="true"] { background: #fff; color: var(--mor); border-color: var(--cizgi-2); }
.filtreler span { color: var(--sis-2); font-weight: 500; margin-left: 4px; }

/* ---------- fikirler */
.fikir-ust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
.uretici {
  border-radius: var(--r-buyuk); padding: 26px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(80% 120% at 100% 0%, #3a2c8f 0%, transparent 60%), var(--gece);
}
.uretici img { position: absolute; right: -10px; bottom: -18px; width: 150px; opacity: .95; }
.uretici h2 { color: #fff; max-width: 15ch; }
.uretici p { color: #c9c3ea; margin: 8px 0 18px; max-width: 34ch; font-size: 14.5px; }
.liste { list-style: none; margin: 0; padding: 0; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); }
.liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.liste > li:last-child { border-bottom: 0; }
.liste .baslik { font-family: var(--baslik); font-weight: 600; font-size: 16.5px; letter-spacing: -.005em; }
.liste .aci { color: var(--sis); font-size: 14px; margin-top: 3px; }
.liste .meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12.5px; color: var(--sis-2); flex-wrap: wrap; }
.benzer { color: var(--altin-koyu); background: var(--altin-acik); padding: 2px 8px; border-radius: 6px; }
.kaynak-etiket { background: #f0eef7; color: var(--sis); padding: 2px 8px; border-radius: 6px; }

/* ---------- proje sayfası */
.proje-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-bottom: 22px; }
.proje-bas .geri { color: var(--sis); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.proje-bas h1 { font-size: 30px; max-width: 30ch; }
.proje-bas .durum-satir { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; color: var(--sis); font-size: 14px; }
.gozluk-kap { display: inline-grid; justify-self: start; }
.gozluk-etiket { display: flex; justify-content: space-between; font-size: 12px; color: var(--sis); margin-top: 6px; padding: 0 6px; }
.proje-govde { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.asamalar { list-style: none; margin: 0; padding: 0; position: sticky; top: 24px; }
.asamalar li { position: relative; }
.asamalar a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 10px;
  border-radius: 10px; color: var(--sis); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.asamalar a:hover { background: #fff; color: var(--murekkep); }
.asamalar a[aria-current="page"] { background: #fff; color: var(--murekkep); box-shadow: var(--golge); }
.asamalar .no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; border: 2px solid var(--cizgi-2); background: var(--zemin); color: var(--sis); }
.asamalar .tamam .no { background: var(--turkuaz); border-color: var(--turkuaz); color: #fff; }
.asamalar .simdi .no { border-color: var(--mor); color: var(--mor); background: #fff; }
.asamalar .bekliyor .no { border-color: var(--altin); background: var(--altin); color: #2b1c00; }
.asamalar li:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 40px; height: 12px; width: 2px; background: var(--cizgi-2); }
.asamalar small { display: block; font-weight: 500; font-size: 12px; color: var(--sis-2); }

.senaryo-ust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.olcu { background: var(--zemin); border-radius: var(--r); padding: 12px 14px; }
.olcu b { display: block; font: 700 22px var(--baslik); }
.olcu span { color: var(--sis); font-size: 13px; }
.kanca { background: var(--gece); color: #fff; border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px; }
.kanca small { color: #a79fd6; font-size: 12.5px; }
.kanca div { font: 800 24px/1.15 var(--baslik); letter-spacing: -.01em; margin-top: 4px; color: #ffd84a; }
.sahneler { display: grid; gap: 0; counter-reset: sahne; }
.sahne { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.sahne .sira { font: 600 13px var(--govde); color: var(--sis-2); padding-top: 3px; }
.sahne .metin { font-size: 16px; line-height: 1.6; }
.sahne .gorsel-tarif { color: var(--sis); font-size: 13.5px; margin-top: 6px; }
.sahne .bolum-adi { grid-column: 1 / -1; font: 650 13.5px var(--govde); color: var(--mor); margin-top: 6px; }
.sahne textarea { min-height: 60px; font-size: 15px; }
.sahne .kucuk-resim { width: 132px; border-radius: 8px; aspect-ratio: 16/9; object-fit: cover; }
.sahne.gorselli { grid-template-columns: 44px 132px minmax(0, 1fr); }
.sahne details summary { cursor: pointer; color: var(--mor); font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.sahne details form { margin-top: 10px; display: grid; gap: 10px; }
.eylem-cubugu {
  position: sticky; bottom: 0; z-index: 5; margin-top: 22px; padding: 14px 18px; border-radius: var(--r-buyuk);
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--cizgi); box-shadow: 0 -6px 24px -14px rgba(27,20,70,.25);
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.eylem-cubugu p { color: var(--sis); font-size: 14px; }
dialog { border: 0; border-radius: var(--r-buyuk); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px -20px rgba(27,20,70,.5); }
dialog::backdrop { background: rgba(27, 20, 70, .45); }
dialog form { padding: 24px; }
dialog h3 { margin-bottom: 6px; }
dialog p { color: var(--sis); font-size: 14px; margin-bottom: 14px; }

.surumler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.surumler li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--zemin); }
.surumler .v { font: 700 13px var(--govde); background: #fff; border: 1px solid var(--cizgi-2); border-radius: 6px; padding: 2px 7px; }
.surumler .not { color: var(--sis); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fark del { background: var(--kirmizi-acik); color: #7a1d28; text-decoration: line-through; text-decoration-color: rgba(122,29,40,.5); }
.fark ins { background: var(--turkuaz-acik); color: #134f55; text-decoration: none; }

.adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.adimlar li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 4px; font-size: 14.5px; color: var(--sis-2); }
.adimlar .i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cizgi-2); }
.adimlar .bitti { color: var(--murekkep); }
.adimlar .bitti .i { background: var(--turkuaz); border-color: var(--turkuaz); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.adimlar .simdi { color: var(--murekkep); font-weight: 650; }
.adimlar .simdi .i { border-color: var(--mor); border-top-color: transparent; animation: don 1s linear infinite; }
.adimlar small { color: var(--sis-2); font-size: 12.5px; font-weight: 500; }
@keyframes don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .adimlar .simdi .i { animation: none; border-top-color: var(--mor); } .cubuk.belirsiz i { animation: none; } }

.oynatici { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.oynatici video { width: 100%; border-radius: var(--r); background: #000; aspect-ratio: 16/9; }
.oynatici.dikey { grid-template-columns: 300px minmax(0, 1fr); }
.oynatici.dikey video { aspect-ratio: 9/16; max-height: 70vh; }
.sahne-liste { max-height: 520px; overflow-y: auto; display: grid; gap: 4px; padding-right: 4px; }
.sahne-liste button { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; text-align: left; padding: 8px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; font: 13.5px/1.4 var(--govde); color: var(--murekkep); }
.sahne-liste button:hover { background: var(--zemin); }
.sahne-liste time { color: var(--sis-2); font-variant-numeric: tabular-nums; }

/* ---------- video bilgileri */
.baslik-sec { display: grid; gap: 8px; }
.baslik-sec label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; padding: 8px 12px; border: 1px solid var(--cizgi-2); border-radius: 10px; font-weight: 500; cursor: pointer; background: #fff; }
.baslik-sec label:has(input[type=radio]:checked) { border-color: var(--mor); box-shadow: 0 0 0 3px rgba(78,58,155,.12); }
.baslik-sec input[type=text] { border: 0; padding: 4px 0; box-shadow: none; font-family: var(--baslik); font-weight: 600; font-size: 16px; }
.baslik-sec input[type=radio] { width: 18px; height: 18px; accent-color: var(--mor); }
.thumbler { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.thumb { border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; background: #fff; }
.thumb.secili { border-color: var(--mor); box-shadow: 0 0 0 3px rgba(78,58,155,.18); }
.thumb img { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.thumb form { padding: 12px; display: grid; gap: 10px; }
.thumb textarea { min-height: 70px; font: 700 14px/1.4 var(--govde); text-transform: uppercase; }
.thumb .satir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thumb .ust { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0; }
.secili-isaret { color: var(--mor); font-weight: 700; font-size: 13px; }
.kaydedildi { color: var(--turkuaz-koyu); font-weight: 600; font-size: 13.5px; }
.onizleme-aciklama { white-space: pre-wrap; background: var(--zemin); border-radius: var(--r); padding: 14px; font-size: 13.5px; color: var(--sis); max-height: 160px; overflow: auto; }

/* ---------- indir */
.indir-kartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.indir-kartlari > * { min-width: 0; }
.indir-kart { border-radius: var(--r-buyuk); padding: 24px; background: var(--kart); border: 1px solid var(--cizgi); display: grid; gap: 14px; align-content: start; }
.indir-kart.long { background: radial-gradient(90% 120% at 100% 0%, #3a2c8f 0%, transparent 60%), var(--gece); color: #fff; border: 0; }
.indir-kart.long h2 { color: #fff; }
.indir-kart.long ul { color: #cfc9ee; }
.indir-kart ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--sis); }
.indir-kart .onizleme { border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.indir-kart .onizleme img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- tablolar */
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th { text-align: left; color: var(--sis); font-weight: 600; font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi-2); }
.tablo td { padding: 12px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:last-child td { border-bottom: 0; }
.tablo .sag { text-align: right; }
.tablo audio { height: 34px; width: 220px; }
.tablo-kap { overflow-x: auto; }
pre.kayit { background: var(--gece); color: #d9d4f2; padding: 18px; border-radius: var(--r); font-size: 12.5px; line-height: 1.5; max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.test { font-size: 13.5px; font-weight: 600; }
.test.ok { color: var(--turkuaz-koyu); }
.test.hata { color: var(--kirmizi); }
.disk { display: grid; gap: 8px; }

/* ---------- giriş */
.giris-sayfa {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--zemin);
}
.giris-sol {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 44px;
  background:
    radial-gradient(1px 1px at 14% 20%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 14%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 60% 48%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 26% 72%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 82%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(60% 50% at 70% 60%, rgba(45,164,174,.25), transparent 70%),
    radial-gradient(80% 70% at 20% 10%, #3a2c8f, transparent 70%),
    var(--gece);
  color: #fff;
}
.giris-sol .marka { padding: 0; }
.giris-sol h1 { color: #fff; font-size: 46px; max-width: 12ch; letter-spacing: -.03em; }
.giris-sol p { color: #c9c3ea; max-width: 38ch; margin-top: 12px; font-size: 16px; }
.giris-sol .nexo { align-self: center; width: auto; max-width: min(62%, 360px); max-height: 42vh; object-fit: contain; margin: 24px 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.giris-sag { display: grid; place-items: center; padding: 32px 20px; }
.giris-kutu { width: min(400px, 100%); }
.giris-kutu h2 { font-size: 28px; margin-bottom: 6px; }
.giris-kutu > p, .giris-kutu > form > p { color: var(--sis); margin-bottom: 26px; }
.giris-kutu .dugme { width: 100%; }
.kod-girdi { font-size: 26px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.onay-kutu { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; margin: 4px 0 20px; font-size: 14.5px; cursor: pointer; }
.onay-kutu input { width: 18px; height: 18px; accent-color: var(--mor); }
.onay-kutu span { grid-column: 2; color: var(--sis); font-size: 13px; }
.kod-alt { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; }
.giris-kutu .kod-alt .dugme.metin { width: auto; background: none; border: 0; padding: 0; color: var(--mor); font-weight: 600; cursor: pointer; }
.kod-alt a { color: var(--sis); }
.cihazlar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; padding: 14px 0 20px; margin-bottom: 18px; border-bottom: 1px solid var(--cizgi); }

/* ---------- duyarlı */
@media (max-width: 1100px) {
  .pano { grid-template-columns: 1fr; }
  .oynatici, .oynatici.dikey { grid-template-columns: 1fr; }
  .senaryo-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .iskelet { grid-template-columns: 1fr; }
  .kenar { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  .kenar.acik { transform: none; box-shadow: 0 0 0 100vmax rgba(27,20,70,.45); }
  .mobil-bas { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--gece); color: #fff; position: sticky; top: 0; z-index: 20; }
  .mobil-bas .marka { padding: 0; }
  .mobil-bas .marka .logo { width: 34px; height: 34px; }
  .mobil-bas button { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 8px; width: 42px; height: 42px; display: grid; place-items: center; }
  .ana { padding: 22px 16px 48px; }
  h1 { font-size: 27px; }
  .proje-govde { grid-template-columns: 1fr; }
  .asamalar { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 6px; }
  .asamalar li::after { display: none; }
  .asamalar li { flex: 0 0 auto; }
  .asamalar a { white-space: nowrap; grid-template-columns: 26px auto; gap: 8px; padding: 8px 10px; }
  .asamalar .no { width: 26px; height: 26px; }
  .asamalar small { display: none; }
  .fikir-ust, .izgara-2, .indir-kartlari { grid-template-columns: 1fr; }
  .proje-bas { grid-template-columns: 1fr; }
  .giris-sayfa { grid-template-columns: 1fr; }
  .giris-sol { min-height: 300px; padding: 28px 20px; }
  .giris-sol h1 { font-size: 34px; }
  .giris-sol .nexo { max-height: 160px; margin: 12px 0; }
  .sahne.gorselli { grid-template-columns: 36px minmax(0, 1fr); }
  .sahne.gorselli .kucuk-resim { grid-column: 2; width: 100%; max-width: 260px; }
  .liste > li { grid-template-columns: 1fr; }
}