/* Zemin Iyilestirme — koyu arayuz (tuval AutoCAD gibi siyah). Renkler tek yerde. */
:root {
  --zemin: #15171a; --yuzey: #1d2024; --yuzey2: #25292e; --cizgi: #33383f; --cizgi2: #444a52;
  --yazi: #e8eaed; --soluk: #9aa1a9; --silik: #6b727a;
  --vurgu: #4c8dff; --vurgu-koyu: #2f6fe0; --vurgu-zemin: rgba(76, 141, 255, .14);
  --basari: #3ecf8e; --uyari: #f5b83d; --hata: #ff6b6b;
  --r: 8px; --r-kucuk: 6px;
  --golge: 0 6px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--zemin); color: var(--yazi); font: 13px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.ik { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ik.buyuk { width: 40px; height: 40px; stroke-width: 1.4; color: var(--vurgu); }

/* ---- ust cubuk */
header { height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.marka { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.logo { width: 20px; height: 20px; border-radius: 5px; background:
  radial-gradient(circle at 30% 30%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 70% 30%, #fff 0 2px, transparent 2.5px),
  radial-gradient(circle at 30% 70%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 70% 70%, #fff 0 2px, transparent 2.5px), var(--vurgu); }
.dosya-bilgi { flex: 1; min-width: 0; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dosya-bilgi b { color: var(--yazi); font-weight: 550; }
.dosya-bilgi .hata { color: var(--hata); }
.sag { display: flex; align-items: center; gap: 10px; }
.kullanici { color: var(--soluk); }

/* ---- dugmeler */
button, .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: var(--r-kucuk);
  padding: 6px 12px; background: var(--vurgu); color: #fff; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, opacity .12s; }
button:hover, .dugme:hover { background: var(--vurgu-koyu); }
button:disabled { opacity: .45; cursor: not-allowed; background: var(--vurgu); }
button.ikincil, .dugme.ikincil { background: var(--yuzey2); border-color: var(--cizgi2); color: var(--yazi); }
button.ikincil:hover, .dugme.ikincil:hover { background: #2e3339; border-color: #58606a; }
button.metin { background: none; border: 0; padding: 2px 4px; color: var(--vurgu); }
button.metin:hover { background: none; text-decoration: underline; }
button.kucuk, .dugme.kucuk { padding: 4px 10px; font-size: 12px; }
button.tam { width: 100%; }
button.birincil { width: 100%; padding: 10px 14px; font-weight: 600; font-size: 14px; }
button.sil { background: none; border: 0; color: var(--silik); padding: 2px 6px; font-size: 15px; line-height: 1; }
button.sil:hover { color: var(--hata); background: none; }
.baglanti { color: var(--vurgu); cursor: pointer; text-decoration: underline; }

/* ---- sahne */
main { display: flex; height: calc(100% - 48px); }
#sahne { position: relative; flex: 1; min-width: 0; background: #000; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#ust { pointer-events: none; }
.gizli-arac { display: none !important; }
.arac.anahtar-arac.acik { color: var(--vurgu); background: var(--vurgu-zemin); }
button.arac { background: none; border: 0; padding: 0; }
button.arac:hover { background: var(--yuzey2); }
button.arac:disabled { opacity: .35; background: none; }
.soru-perde { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 5; }
.soru { width: min(460px, calc(100% - 32px)); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 20px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 10px; }
.soru strong { font-size: 15px; }
.secenekler { display: flex; flex-direction: column; gap: 6px; }
.secenek { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; background: var(--zemin); border: 1px solid var(--cizgi2); color: var(--yazi); padding: 10px 12px; text-align: left; }
.secenek:hover { background: var(--vurgu-zemin); border-color: var(--vurgu); }
.secenek b { font-weight: 600; }
.secenek small { color: var(--soluk); }
.secenek .rozet { margin-left: 6px; }

canvas.hedef { cursor: crosshair; }
canvas.isaret { cursor: pointer; }

.bos-durum { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at center, #121418 0%, #000 70%); }
.birak { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 48px; border: 1.5px dashed var(--cizgi2); border-radius: 14px; color: var(--soluk); max-width: 460px; transition: border-color .15s, background .15s; }
.birak strong { color: var(--yazi); font-size: 16px; font-weight: 600; }
.birak small { color: var(--silik); margin-top: 6px; }
.bos-durum.uzerinde .birak { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.yukleniyor { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px; padding: 7px 14px; box-shadow: var(--golge); }
.donen { width: 14px; height: 14px; border: 2px solid var(--cizgi2); border-top-color: var(--vurgu); border-radius: 50%; animation: don .8s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.araclar { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 2px; padding: 5px; background: rgba(29, 32, 36, .94); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); }
.arac { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 7px; color: var(--soluk); cursor: pointer; }
.arac input { position: absolute; opacity: 0; pointer-events: none; }
.arac:hover { background: var(--yuzey2); color: var(--yazi); }
.arac:has(input:checked) { background: var(--vurgu); color: #fff; }
.arac .ik { width: 18px; height: 18px; }
.arac span { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); background: #0b0c0e; color: var(--yazi); padding: 4px 8px; border-radius: 5px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.arac:hover span { opacity: 1; }
.ayrac { height: 1px; margin: 3px 4px; background: var(--cizgi); }
.araclar.profilsiz .profil-araci { display: none; }

.ipucu-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100% - 180px); padding: 7px 14px; background: rgba(15, 17, 20, .9); border: 1px solid var(--cizgi); border-radius: 999px; color: var(--soluk); font-size: 12.5px; text-align: center; box-shadow: var(--golge); }
.ipucu-bar b, .ipucu-bar kbd { color: var(--yazi); }
kbd { font: 11px ui-monospace, monospace; padding: 1px 5px; border: 1px solid var(--cizgi2); border-bottom-width: 2px; border-radius: 4px; }

.yakinlik { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; background: rgba(29, 32, 36, .94); border: 1px solid var(--cizgi); border-radius: 9px; overflow: hidden; box-shadow: var(--golge); }
.yakinlik button { background: none; border: 0; border-radius: 0; color: var(--soluk); width: 34px; height: 32px; padding: 0; }
.yakinlik button:hover { background: var(--yuzey2); color: var(--yazi); }
.yakinlik button + button { border-top: 1px solid var(--cizgi); }

.bildirim { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 40; max-width: 380px; padding: 10px 14px; border-radius: var(--r); background: #2a1719; border: 1px solid #6b2a2e; color: #ffd4d4; box-shadow: var(--golge); }
.bildirim.bilgi { background: #14243d; border-color: #2b4c7e; color: #d5e5ff; }

/* ---- panel ve kartlar */
aside { width: 380px; display: flex; flex-direction: column; background: var(--yuzey); border-left: 1px solid var(--cizgi); }
.kartlar { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kart { background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--r); }
.kart > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; user-select: none; }
.kart > summary::-webkit-details-marker { display: none; }
.kart .no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; background: var(--zemin); color: var(--soluk); border: 1px solid var(--cizgi2); flex: none; }
.kart.tamam .no { background: var(--basari); border-color: var(--basari); color: #0b2a1d; }
.kart.sirada .no { background: var(--vurgu); border-color: var(--vurgu); color: #fff; box-shadow: 0 0 0 4px var(--vurgu-zemin); }
.kart .baslik { font-weight: 600; }
.kart .ozet { margin-left: auto; color: var(--soluk); font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.kart .ok { color: var(--silik); transition: transform .15s; }
.kart[open] > summary .ok { transform: rotate(90deg); }
.kart .icerik { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.kart > summary .anahtar { margin-left: auto; }

.alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.alan > label { color: var(--soluk); font-size: 12px; }
.alan > label small, .not { color: var(--silik); font-size: 11.5px; }
.not { margin: 0; }
.not.uyari-not { color: var(--uyari); margin-top: 4px; display: block; }
.not.uyari-not[hidden] { display: none; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uclu { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
input[type=text], input[type=password], input:not([type]), input[type=number], select, textarea {
  width: 100%; background: var(--zemin); border: 1px solid var(--cizgi2); border-radius: var(--r-kucuk); padding: 6px 8px; outline: none; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-zemin); }
input.hatali { border-color: var(--hata); box-shadow: 0 0 0 3px rgba(255, 107, 107, .15); }
input::placeholder, textarea::placeholder { color: var(--silik); }
textarea { resize: vertical; min-height: 64px; }
.birimli { position: relative; }
.birimli input { padding-right: 30px; }
.birimli i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--silik); font-style: normal; font-size: 11.5px; pointer-events: none; }
/* Sayi alanlari: tarayicinin klasik ok'lari yerine ince, ayni dilde adim dugmeleri (JS: sayiKutusu). */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.birimli input[type=number] { padding-right: 28px; }
.birimli:has(i) input[type=number] { padding-right: 46px; }
.birimli:has(.adim) i { right: 27px; }
.adim { position: absolute; top: 3px; bottom: 3px; right: 3px; width: 20px; display: flex; flex-direction: column; gap: 1px; opacity: .55; transition: opacity .12s; }
.birimli:hover .adim, .birimli:focus-within .adim { opacity: 1; }
.adim button { flex: 1; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--soluk); }
.adim button:hover { background: var(--vurgu-zemin); color: var(--yazi); }
.adim button:active { background: var(--vurgu); color: #fff; }
.adim .ik { width: 11px; height: 11px; stroke-width: 2.2; }
/* Acilir listeler: ayni ince ok */
select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; }
select:hover { border-color: #58606a; }
select option { background: var(--yuzey2); color: var(--yazi); }

.gelismis { border-top: 1px solid var(--cizgi); padding-top: 8px; }
.gelismis > summary { cursor: pointer; color: var(--soluk); font-size: 12px; font-weight: 550; list-style: none; display: flex; align-items: center; gap: 6px; }
.gelismis > summary::-webkit-details-marker { display: none; }
.gelismis > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.gelismis[open] > summary::before { transform: rotate(45deg); }
.gelismis[open] > summary { margin-bottom: 10px; }
.gelismis > :not(summary) + :not(summary) { margin-top: 10px; }
.rozet { background: var(--zemin); border: 1px solid var(--cizgi2); color: var(--soluk); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 500; }
.rozet:empty { display: none; }

.dugmeler { display: flex; gap: 6px; }
.dugmeler button { flex: 1; }
.satir { display: flex; gap: 8px; align-items: center; }
.satir .etiket { color: var(--soluk); font-size: 12px; white-space: nowrap; }
.liste { display: flex; flex-direction: column; gap: 4px; }
.liste.bos { color: var(--silik); font-size: 12px; padding: 10px; border: 1px dashed var(--cizgi2); border-radius: var(--r-kucuk); text-align: center; }
.liste-oge { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); }
.liste-oge .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-oge .ad small { color: var(--silik); margin-left: 6px; }
.liste-oge select, .liste-oge input { width: auto; padding: 3px 6px; font-size: 12px; }
.liste-oge select { padding-right: 24px; background-position: right 6px center; }
.liste-oge .cap-yer .birimli { width: 80px; }
.liste-oge .sondaj-ad { width: 90px; }
.alt-kutu { padding: 10px; border-radius: var(--r-kucuk); background: var(--vurgu-zemin); border: 1px solid rgba(76, 141, 255, .35); display: flex; flex-direction: column; gap: 8px; }
.alt-baslik { display: flex; align-items: center; justify-content: space-between; font-weight: 550; }
.cap-yer { display: flex; gap: 6px; flex: 1; min-width: 0; }
.cap-yer select { flex: 1; min-width: 0; }
.cap-yer input { width: 100%; }
.cap-yer .birimli { width: 92px; flex: none; }
.ek-bilgi { color: var(--soluk); font-size: 12px; }
.ek-bilgi:empty, .ek-bilgi:not(:has(> span:not([hidden]))) { display: none; }

.anahtar { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; }
.anahtar input { opacity: 0; width: 0; height: 0; position: absolute; }
.anahtar span { position: absolute; inset: 0; border-radius: 999px; background: var(--cizgi2); transition: background .15s; cursor: pointer; }
.anahtar span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.anahtar input:checked + span { background: var(--vurgu); }
.anahtar input:checked + span::after { transform: translateX(15px); }

.kesit-sec select { flex: 1; }
#profilPanel { display: flex; flex-direction: column; gap: 10px; }
.adimlar-mini { display: flex; flex-direction: column; gap: 6px; }
.yer-dugme { justify-content: flex-start; background: var(--zemin); border: 1px dashed var(--cizgi2); color: var(--soluk); padding: 8px 10px; text-align: left; white-space: normal; }
.yer-dugme:hover { background: var(--zemin); border-color: var(--vurgu); color: var(--yazi); }
.yer-dugme.tamam { border-style: solid; border-color: rgba(62, 207, 142, .45); color: var(--yazi); }
.yer-dugme.tamam .ik { color: var(--basari); }
.hat-dugmeler { justify-content: flex-end; margin-top: -2px; }
.hat-dugmeler[hidden] { display: none; }

.tablo { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 12px; }
.tablo th { color: var(--silik); font-weight: 500; text-align: left; padding: 0 2px; }
.tablo td { padding: 0 2px; }
.tablo input { padding: 4px 5px; font-size: 12px; }
.tablo td:last-child { width: 22px; }
.hata { color: var(--hata); margin: 0; font-size: 12px; }
.hata:empty { display: none; }

/* ---- sonuc */
.sonuc-kutu { padding: 12px; border-top: 1px solid var(--cizgi); background: var(--yuzey); display: flex; flex-direction: column; gap: 10px; }
.sonuc { color: var(--soluk); font-size: 12.5px; min-height: 20px; }
.sonuc .sayi { color: var(--yazi); font-size: 20px; font-weight: 650; margin-right: 6px; }
.sonuc .cap-rozet { display: inline-block; margin: 4px 4px 0 0; padding: 1px 8px; border-radius: 999px; background: var(--yuzey2); border: 1px solid var(--cizgi2); color: var(--yazi); font-size: 11.5px; }
.sonuc .uyari { color: var(--uyari); }

/* ---- giris ekrani */
body.giris { display: grid; place-items: center; background: radial-gradient(ellipse at top, #1b2230 0%, var(--zemin) 60%); }
#giris { width: 340px; padding: 28px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 12px; }
#giris h1 { font-size: 18px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
#giris label { display: flex; flex-direction: column; gap: 5px; color: var(--soluk); font-size: 12px; }
#giris button { width: 100%; margin-top: 6px; padding: 9px; font-weight: 600; }

@media (max-width: 900px) {
  aside { width: 320px; }
}

/* Bolge ciz secenekleri (tuvalin ustunde, ortada) */
.cizim-secenek { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(29, 32, 36, .95); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); }
.cizim-secenek button { background: none; border: 0; color: var(--soluk); padding: 5px 9px; border-radius: 7px; font-size: 12px; gap: 6px; }
.cizim-secenek button:hover { background: var(--yuzey2); color: var(--yazi); }
.cizim-secenek button.secili { background: var(--vurgu); color: #fff; }
.cizim-secenek kbd { border-color: rgba(255,255,255,.25); color: inherit; opacity: .75; font-size: 10px; padding: 0 4px; }
.ayrac-dik { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--cizgi); }
/* Sag tik menusu */
.sag-menu { position: fixed; z-index: 70; min-width: 210px; padding: 5px; background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 9px; box-shadow: var(--golge); display: flex; flex-direction: column; }
.sag-menu button { justify-content: space-between; background: none; border: 0; color: var(--yazi); padding: 7px 10px; border-radius: 6px; font-size: 12.5px; width: 100%; }
.sag-menu button:hover { background: var(--vurgu); color: #fff; }
.sag-menu button:disabled { opacity: .4; background: none; color: var(--yazi); }
.sag-menu button.secili span::before { content: "•"; color: var(--vurgu); margin-right: 6px; }
.sag-menu kbd { color: var(--soluk); border: 0; font-size: 11px; }
.sag-menu button:hover kbd { color: #fff; }
.menu-ayrac { height: 1px; margin: 4px 6px; background: var(--cizgi); }
canvas.kaydir { cursor: grabbing !important; }

.bildirim-eylem { margin-left: 10px; color: #9cc3ff; font-weight: 600; }

/* Ozellikler paneli (secim): tuvalin sag ustu */
.ozellik { position: absolute; top: 14px; right: 14px; width: 250px; z-index: 5; padding: 10px 12px 12px; border-radius: var(--r); background: rgba(19,24,33,.96); border: 1px solid #2c3647; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 8px; }
.oz-baslik { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; }
#ozellikIc { display: flex; flex-direction: column; gap: 8px; }
#ozellikIc .not { margin: 0; font-size: 12px; color: #9aa7ba; }
.oz-satir { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px; font-size: 12px; color: #9aa7ba; }
.oz-satir input { width: 100%; min-width: 0; }
.oz-satir > span:first-child { white-space: nowrap; min-width: 34px; }
.tehlike { color: #ffb4b4 !important; border-color: #6b2a2e !important; }
/* Nokta araclarinda X/Y ofset kutulari: imlecin sag ustunde, sembolle cakismaz */
.din-giris { position: absolute; z-index: 7; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(19,24,33,.95); border: 1px solid #3a6fd8; box-shadow: var(--golge); font-size: 12px; color: #9aa7ba; }
.din-giris label { display: flex; align-items: center; gap: 4px; }
.din-giris input { width: 72px; padding: 3px 6px; font: inherit; color: #e8eef7; background: #0e131b; border: 1px solid #2c3647; border-radius: 5px; }
.din-giris input:focus { outline: none; border-color: #6ea0ff; }
.din-not { font-size: 11px; }

/* Adsiz sondaj uyarisi */
.uyari-metin { color: #ffb86b; }
input.sondaj-ad.hatali { border-color: #d9822b; }

/* OSNAP: arac cubugunda tek dugme; tiklayinca sagda yakalama / yakin / dik seridi acilir */
.osnap-kutu { position: relative; }
.osnap-isik { position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--vurgu); }
.osnap-isik.kapali { background: var(--soluk); opacity: .5; }
#osnapAc[aria-expanded="true"] { background: var(--yuzey2); color: var(--yazi); }
#osnapAc[aria-expanded="true"] span { opacity: 0; }
.osnap-panel { position: absolute; left: 44px; top: -5px; z-index: 8; display: flex; align-items: center; gap: 4px; padding: 5px; background: rgba(29, 32, 36, .97); border: 1px solid var(--cizgi); border-radius: 10px; box-shadow: var(--golge); white-space: nowrap; }
.osnap-oge { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--soluk); font-size: 12.5px; cursor: pointer; }
.osnap-oge b { font-weight: 500; }
.osnap-oge kbd { font-size: 10.5px; color: var(--soluk); border: 1px solid var(--cizgi2); border-radius: 4px; padding: 0 4px; }
.osnap-oge .ik { width: 16px; height: 16px; }
.osnap-oge:hover { background: var(--yuzey2); color: var(--yazi); }
.osnap-oge.acik { color: var(--vurgu); background: var(--vurgu-zemin); }
.osnap-oge.pasif { opacity: .45; }
.osnap-panel small { font-size: 10.5px; color: var(--soluk); padding: 0 6px 0 4px; }
.menu-baslik { font-size: 11px; font-weight: 600; color: var(--soluk); padding: 5px 10px 3px; }
.sag-menu button.isaretli span::before { content: "✓"; color: var(--vurgu); margin-right: 6px; }
.sag-menu button.isaretsiz span::before { content: "✓"; visibility: hidden; margin-right: 6px; }
.arac.pasif { opacity: .45; }

/* ---- Projeler (EKB Studio liste sayfasi duzeni) */
.sekmeler { display: flex; gap: 2px; margin-left: 6px; }
.sekme { background: none; border: 0; color: var(--soluk); padding: 6px 12px; border-radius: 7px; font-weight: 500; }
.sekme:hover { background: var(--yuzey2); color: var(--yazi); }
.sekme.secili { background: var(--yuzey2); color: var(--yazi); }
.sekme:disabled { opacity: .4; background: none; }
.kayit-durum { font-size: 12px; color: var(--silik); white-space: nowrap; }
.kayit-durum.hata { color: var(--hata); }
.projeler { position: absolute; inset: 48px 0 0 0; z-index: 30; overflow: auto; background: var(--zemin); padding: 28px 20px 40px; }
.pr-sarmal { max-width: 1140px; margin: 0 auto; }
.pr-baslik { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.pr-baslik h1 { margin: 0; font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.pr-ozet { color: var(--silik); font-size: 12.5px; margin-top: 3px; }
.pr-yeni { display: flex; gap: 10px; flex-wrap: wrap; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.pr-ice { margin: -6px 0 16px; font-size: 13px; color: var(--soluk); text-align: right; }
.pr-yeni input[type=text] { flex: 1 1 240px; padding: 8px 11px; border: 1px solid var(--cizgi2); border-radius: 8px; background: var(--zemin); }
.pr-yeni input[type=text]:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-zemin); }
.pr-bolge { flex: 1 1 300px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px dashed var(--cizgi2); border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--soluk); }
.pr-bolge:hover, .pr-bolge.uzerinde { border-color: var(--vurgu); background: var(--vurgu-zemin); }
.pr-bolge.dolu { border-style: solid; color: var(--yazi); }
.pr-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.pr-kart { min-width: 0; position: relative; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pr-kart:hover { background: var(--yuzey2); border-color: var(--cizgi2); }
.pr-kart .ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pr-kart .ad { font-weight: 640; font-size: 14.5px; letter-spacing: -.01em; word-break: break-word; }
.pr-kart .pid { white-space: nowrap; display: inline-block; font: 600 10.5px ui-monospace, Menlo, Consolas, monospace; color: var(--soluk); background: var(--yuzey2); border: 1px solid var(--cizgi2); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.pr-kart .yer { color: var(--silik); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cip { font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.cip.hazir { background: #12301d; color: #7ee2a8; } .cip.hazir::before { background: var(--basari); }
.cip.devam { background: #2a2410; color: #e8c15a; } .cip.devam::before { background: var(--uyari); }
.pr-adimlar { display: flex; gap: 3px; }
.pr-adimlar i { flex: 1; height: 4px; border-radius: 3px; background: var(--cizgi); }
.pr-adimlar i.tam { background: var(--soluk); }
.pr-kart .alt { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--cizgi); padding-top: 11px; font-size: 12px; color: var(--soluk); }
.pr-kart .alt b { color: var(--yazi); font-weight: 600; }
.pr-kart .tarih { color: var(--silik); font: 11px ui-monospace, Menlo, Consolas, monospace; }
.pr-kart .islemler { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-kart .islemler button { padding: 3px 9px; font-size: 11.5px; white-space: nowrap; flex: 0 0 auto; }
.pr-bos { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--soluk); border: 1px dashed var(--cizgi); border-radius: 12px; }
.pr-bos strong { color: var(--yazi); font-size: 15px; }
.ust-perde { position: fixed; z-index: 60; }
.soru-dugmeler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#onayGirdi { padding: 8px 11px; border: 1px solid var(--cizgi2); border-radius: 8px; background: var(--zemin); }
button.tehlike-dolu { background: #b3261e; } button.tehlike-dolu:hover { background: #d0342b; }

/* Kesit penceresi */
.kp-perde { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.kp { width: calc(100vw - 16px); height: calc(100vh - 16px); display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--golge); overflow: hidden; }
.kp-ust { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
.kp-ust strong { font-size: 15px; }
.kp-alt { color: var(--soluk); font-size: 12.5px; flex: 1; }
.kp-govde { flex: 1; display: grid; grid-template-columns: var(--kp-sol, 470px) 6px 1fr; min-height: 0; }
.kp-sol { display: flex; flex-direction: column; min-height: 0; background: var(--yuzey2); }
.kp-form { overflow-y: auto; padding: 12px; flex: 1; }
.kp-ayrac { cursor: col-resize; background: var(--cizgi); } .kp-ayrac:hover, .kp-ayrac.surukle { background: var(--vurgu); }
.kp-sekmeler { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--cizgi); overflow-x: auto; }
.kp-sekmeler button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; color: var(--soluk); padding: 7px 10px; font-size: 12.5px; white-space: nowrap; }
.kp-sekmeler button:hover { color: var(--yazi); background: var(--yuzey); }
.kp-sekmeler button.secili { color: var(--yazi); border-bottom-color: var(--vurgu); background: var(--yuzey); }
.kp-sekmeler button .eksik { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--uyari); margin-left: 5px; vertical-align: 2px; }
/* Pencerede yalniz secili sekmenin bolumu; basliklari sekme cubugunda */
.kp-mod details.gelismis:not(.kp-aktif) { display: none; }
/* Kesit secimi, hat, ad ve olcek her sekmede tekrar etmesin: yalniz ilk sekmede (baslikta kesit adi zaten var) */
.kp-mod:not(.kp-ilk) .kp-ortak { display: none; }
.kp-mod details.gelismis > summary { display: none; }
.kp-mod details.gelismis { border-top: 0; padding-top: 0; }
.kp-ipucu { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: var(--silik); background: rgba(11,12,14,.75); padding: 4px 10px; border-radius: 12px; pointer-events: none; white-space: nowrap; }
.kp-onizleme canvas { cursor: default; } .kp-onizleme canvas.kaydir { cursor: grabbing; }
/* Tabaka listesi (kutuphaneden) */
.tabaka-liste { display: flex; flex-direction: column; gap: 5px; }
.tabaka-satir, .tabaka-baslik { display: grid; grid-template-columns: 20px 1fr 52px auto; gap: 6px; align-items: center; }
.tabaka-baslik { font-size: 11px; color: var(--silik); text-transform: uppercase; letter-spacing: .04em; }
.tabaka-baslik span:nth-child(3) { text-align: center; }
.tabaka-baslik span:last-child { width: 66px; }
/* Modern anahtar (checkbox) */
.anahtar-k { display: flex; justify-content: center; cursor: pointer; }
.anahtar-k input { position: absolute; opacity: 0; width: 0; height: 0; }
.anahtar-k i { width: 30px; height: 17px; border-radius: 9px; background: var(--cizgi2); position: relative; transition: background .15s; }
.anahtar-k i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.anahtar-k input:checked + i { background: var(--basari); }
.anahtar-k input:checked + i::after { transform: translateX(13px); }
.anahtar-k input:focus-visible + i { outline: 2px solid var(--vurgu); outline-offset: 2px; }
/* Tabaka adi onerileri */
.oneri-liste { position: fixed; z-index: 80; overflow-y: auto; padding: 4px; background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: 9px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 1px; }
.oneri-liste button { justify-content: flex-start; background: none; border: 0; color: var(--yazi); padding: 7px 10px; border-radius: 6px; font-size: 12px; text-align: left; white-space: normal; line-height: 1.35; gap: 0; }
.oneri-liste button:hover, .oneri-liste button.secili { background: var(--vurgu); color: #fff; }
.oneri-liste button.kullanildi { color: var(--soluk); }
.oneri-liste button span { flex: 1; min-width: 0; }
.oneri-liste mark { background: none; color: var(--uyari); font-weight: 600; }
.oneri-liste button:hover mark, .oneri-liste button.secili mark { color: #fff; text-decoration: underline; }
.oneri-liste small { margin-left: auto; padding-left: 10px; color: var(--silik); font-size: 10.5px; }
.tabaka-satir .no { color: var(--silik); font-size: 11.5px; text-align: right; }
.tabaka-satir input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--cizgi2); border-radius: 6px; background: var(--zemin); font-size: 12px; }
.tabaka-satir .dugmeler { display: flex; gap: 2px; }
.tabaka-satir .dugmeler button { background: none; border: 0; color: var(--soluk); padding: 3px 5px; font-size: 12px; }
.tabaka-satir .dugmeler button:hover { color: var(--yazi); background: var(--yuzey); }
.tabaka-satir .yeni { grid-column: 2 / 5; font-size: 11.5px; color: var(--uyari); display: flex; gap: 8px; align-items: center; }
.tabaka-satir.saglam input.ad { border-color: #2f7a52; }
/* Sondaj kartlari */
.sondaj-kartlar { display: flex; flex-direction: column; gap: 8px; }
.yapistir { border: 1px solid var(--cizgi2); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; background: var(--yuzey); display: flex; flex-direction: column; gap: 6px; }
.yapistir textarea { width: 100%; box-sizing: border-box; font: 12px ui-monospace, monospace; background: var(--zemin); color: var(--yazi); border: 1px solid var(--cizgi2); border-radius: 6px; padding: 6px; resize: vertical; }
.yapistir-kip { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.yapistir-onizleme { font-size: 12px; }
.yapistir-onizleme table { border-collapse: collapse; width: 100%; }
.yapistir-onizleme td { padding: 2px 6px; border-bottom: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; }
.yapistir-onizleme .hata { color: var(--hata); }
.yapistir-onizleme .uyari { color: var(--uyari); }
.yapistir-dugmeler { display: flex; gap: 8px; justify-content: flex-end; }
.sk-kart { border: 1px solid var(--cizgi2); border-radius: 8px; padding: 8px 10px; background: var(--yuzey); }
.sk-kart.secili { border-color: var(--uyari); box-shadow: 0 0 0 2px rgba(245,184,61,.25); }
.sk-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sk-bas input { width: 90px; font-weight: 600; padding: 4px 6px; border: 1px solid var(--cizgi2); border-radius: 6px; background: var(--zemin); }
.sk-bas .ara { color: var(--silik); font-size: 11.5px; flex: 1; }
.sk-bas button { background: none; border: 0; color: var(--soluk); }
.sk-alan { display: grid; grid-template-columns: 1fr 96px 34px; gap: 6px; align-items: center; font-size: 12px; color: var(--soluk); margin-top: 4px; }
.sk-alan input { width: 100%; padding: 4px 6px; border: 1px solid var(--cizgi2); border-radius: 6px; background: var(--zemin); text-align: right; }
.sk-alan.sinir { padding-left: 10px; border-left: 2px solid var(--cizgi2); }
.sk-alan b { color: var(--yazi); font-weight: 500; }
.sk-alan.yok span { color: var(--silik); }
.sk-alan.yok s { color: var(--soluk); }
.sk-alan input:disabled { opacity: .45; }
.sk-not { margin: 6px 0 0; font-size: 11px; }
.kp-onizleme { position: relative; background: #000; min-width: 0; }
.kp-onizleme canvas { width: 100%; height: 100%; display: block; }
.kp-durum { position: absolute; left: 12px; right: 12px; bottom: 12px; color: var(--uyari); font-size: 12.5px; background: rgba(11,12,14,.85); border-radius: 8px; padding: 8px 10px; }
.kp-durum:empty { display: none; }
@media (max-width: 900px) { .kp-govde { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }

/* Radye: plandan gelen bolgeler */
#pRadyePlan { display: flex; flex-direction: column; gap: 6px; }
.radye-kart { border: 1px solid var(--cizgi2); border-radius: 8px; padding: 7px 10px; background: var(--yuzey); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 12px; }
.radye-kart b { font-weight: 550; }
.radye-kart span { color: var(--soluk); margin-left: 6px; }
.radye-kart .ay { grid-column: 1; color: var(--soluk); font-size: 11.5px; }
.radye-kart .pah { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 6px; color: var(--soluk); font-size: 11.5px; }
.radye-kart .pah input { width: 64px; padding: 4px 6px; border: 1px solid var(--cizgi2); border-radius: 6px; background: var(--zemin); text-align: right; }
.uyari-kutu { margin: 0; padding: 8px 10px; border: 1px solid rgba(245,184,61,.5); background: rgba(245,184,61,.08); border-radius: 8px; color: var(--uyari); font-size: 12px; }
.liste-oge .kalinlik { font-size: 11.5px; padding: 2px 4px; color: var(--soluk); }
.liste-oge .kalinlik:hover { color: var(--vurgu); }

/* Pah gorseli: kucuk; uzerine gelince (ya da odakta) buyur, cikinca kuculur */
.pah-satir { display: flex; gap: 12px; align-items: flex-start; }
.pah-satir > div { flex: 1; min-width: 0; }
.pah-resim { flex: none; width: 150px; margin: 0; padding: 4px; background: var(--zemin); border: 1px solid var(--cizgi2); border-radius: 8px; cursor: zoom-in; }
.pah-resim:hover, .pah-resim:focus { border-color: var(--vurgu); outline: none; }
/* Buyuk hali: sayfanin ustunde suzulur (position: fixed) — form kaymaz, kaydirma cubugu cikmaz */
.pah-buyuk { position: fixed; z-index: 90; width: 400px; padding: 8px; background: var(--zemin); border: 1px solid var(--cizgi2); border-radius: 10px;
  box-shadow: var(--golge); pointer-events: none; opacity: 0; transform: scale(.4); transform-origin: right top; transition: opacity .16s ease, transform .16s ease; }
.pah-buyuk.acik { opacity: 1; transform: scale(1); }
.pah-buyuk svg { display: block; width: 100%; height: auto; font-family: Inter, system-ui, sans-serif; }
.pah-resim svg { display: block; width: 100%; height: auto; font-family: Inter, system-ui, sans-serif; }
.pr-radye { fill: rgba(76,141,255,.2); stroke: #4c8dff; stroke-width: 1.4; }
.pr-grobeton { fill: none; stroke: #6b727a; stroke-width: 1; }
.pr-kesik { stroke: #9aa1a9; stroke-width: .7; stroke-dasharray: 3 2; }
.pr-olcu { stroke: #ffd400; stroke-width: 1.2; } .pr-ok { fill: #ffd400; }
.pr-olcu2 { stroke: #9aa1a9; stroke-width: .9; } .pr-ok2 { fill: #9aa1a9; }
.pr-yazi { fill: #e8eaed; font-size: 9px; } .pr-silik { fill: #9aa1a9; font-size: 7.5px; }
.pr-pah { fill: #ffd400; font-size: 10px; font-weight: 700; }
#pRadyeOzet, #pKazikUyari { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.radye-ozet { font-size: 12px; color: var(--soluk); }
.radye-ozet b { color: var(--yazi); font-weight: 550; }

#pAralikNot, #pKazikNot { display: block; margin-top: 4px; }
#pKazikNot { color: var(--yazi); }

/* Kesit penceresinde hata altta (kpDurum), yalniz secili kesitinki; formdaki genel liste gizli */
.kp-mod #pHata { display: none; }

/* Yan panelde profil ayarlari gosterilmez (Kerem 2026-09-27: "karmasik; yalniz Kesit penceresini ac olsun").
   Ayni form pencere acilinca oraya tasinir (#kpForm) ve orada gorunur. */
#profilYuva #profilPanel { display: none; }
.kp-perde:focus{outline:none}

/* Kaziklar paneli: secili bolgenin ayarlari (genel alanlarin ustunde) */
.k2-bolge { border: 1px solid rgba(255,212,0,.45); border-radius: 8px; padding: 8px 10px 4px; margin-bottom: 10px; background: rgba(255,212,0,.05); }
.k2-bolge .k2-baslik:first-child { color: #ffd400; }
.k2-baslik { font-size: 12px; font-weight: 600; color: #9aa7ba; margin: 2px 0 6px; }
.k2-bolge .k2-baslik:last-child { margin: 10px -10px -4px; padding: 6px 10px 0; border-top: 1px solid rgba(255,212,0,.25); }

/* Secili bolgenin satiri (plandaki sari vurguyla ayni) */
#bolgeBilgi .liste-oge.secili { outline: 2px solid #ffd400; outline-offset: -2px; background: rgba(255,212,0,.08); border-radius: 6px; }
#bolgeBilgi .liste-oge.secili .ad { color: #ffd400; }