:root {
  --zemin: #03060d; --zemin-2: #071222; --kart: #0b1a2c; --cizgi: rgba(79, 209, 255, .18);
  --metin: #e6f0fa; --metin-2: #b5c6d8; --soluk: #7f95ab;
  --camgobegi: #4fd1ff; --yesil: #22e3a4; --altin: #f5b942; --kirmizi: #ff5b5b; --mor: #c792ff;
  --sans: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --kesik: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    linear-gradient(var(--cizgi) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--cizgi) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at 20% 0%, #0c2238, var(--zemin) 60%) fixed;
  background-color: var(--zemin);
  color: var(--metin);
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
}
body::before { /* ızgarayı soluklaştır */
  content: ""; position: fixed; inset: 0; background: rgba(3, 6, 13, .82); z-index: -1; pointer-events: none;
}

a { color: var(--camgobegi); }
code { font-family: var(--mono); font-size: .9em; color: var(--camgobegi); }
.soluk { color: var(--soluk); }

.atla { position: absolute; left: -9999px; top: 8px; background: var(--camgobegi); color: #001018; padding: 6px 10px; z-index: 10; }
.atla:focus { left: 8px; }

.etiket {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2.5px; text-transform: none; color: var(--camgobegi); margin: 0;
}

.isik {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil);
  box-shadow: 0 0 8px var(--yesil); margin-right: 8px; vertical-align: 1px; animation: yanson 1.6s ease-in-out infinite;
}
@keyframes yanson { 50% { opacity: .3; } }

/* --------------------------------------------------------------- üst */
.ust { border-bottom: 1px solid var(--cizgi); background: rgba(7, 18, 34, .7); }
.ust-ic { max-width: 1440px; margin: 0 auto; padding: 18px 16px; display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
h1 { margin: 2px 0 2px; font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.alt { margin: 0; color: var(--metin-2); }
.ust-eylem { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.onayar { display: grid; gap: 4px; }

/* --------------------------------------------------------------- düzen */
.duzen {
  max-width: 1440px; margin: 0 auto; padding: 16px; display: grid; gap: 16px;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); align-items: start;
}
@media (max-width: 900px) { .duzen { grid-template-columns: minmax(0, 1fr); } }

.kart {
  background: linear-gradient(135deg, var(--kart), var(--zemin-2));
  border: 1px solid var(--cizgi);
  clip-path: var(--kesik);
  padding: 14px 16px;
}

/* --------------------------------------------------------------- form */
.form { display: grid; gap: 12px; }
.form fieldset { margin: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.form legend + * { clear: both; }
.alanlar { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alanlar .genis { grid-column: 1 / -1; }
.alan { display: grid; gap: 4px; min-width: 0; }
.alan > span { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--metin-2); }

input[type=text], input[type=number], select, textarea {
  width: 100%; min-width: 0; background: #050c18; color: var(--metin); border: 1px solid var(--cizgi);
  border-radius: 4px; padding: 7px 9px; font: inherit; font-size: 14px;
}
textarea { resize: vertical; min-height: 58px; }
input[type=color] { width: 42px; height: 32px; padding: 0 2px; background: #050c18; border: 1px solid var(--cizgi); border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, summary:focus-visible, pre:focus-visible, a:focus-visible {
  outline: 2px solid var(--camgobegi); outline-offset: 2px;
}
.secim-satir { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.kutu { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--metin-2); }
.kutu input { accent-color: var(--camgobegi); width: 16px; height: 16px; }

.renkler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.renk-alan { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--metin-2); }

.liste { display: grid; gap: 8px; margin-top: 10px; }
.liste-baslik { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.oge {
  border: 1px solid var(--cizgi); border-left: 3px solid var(--camgobegi); padding: 10px; background: rgba(5, 12, 24, .7);
  display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end;
}
.oge .s1 { grid-column: span 1; } .oge .s2 { grid-column: span 2; } .oge .s3 { grid-column: span 3; }
.oge .s4 { grid-column: span 4; } .oge .s6 { grid-column: 1 / -1; }
@media (max-width: 480px) { .oge .s1, .oge .s2, .oge .s3, .oge .s4 { grid-column: span 3; } .alanlar { grid-template-columns: minmax(0, 1fr); } .renkler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dugme {
  font: 600 13px var(--sans); letter-spacing: .3px; color: #001018; background: var(--camgobegi);
  border: 1px solid var(--camgobegi); padding: 8px 14px; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.dugme:hover { filter: brightness(1.1); }
.dugme.ikincil { background: transparent; color: var(--camgobegi); }
.dugme.kucuk { padding: 4px 10px; font-size: 12px; }
.dugme.sil { background: transparent; color: var(--kirmizi); border-color: rgba(255, 91, 91, .6); padding: 6px 10px; }
.dugme[disabled] { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------- önizleme */
.onizleme { display: grid; gap: 14px; position: sticky; top: 12px; min-width: 0; }
@media (max-width: 900px) { .onizleme { position: static; } }
.arac-satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.satir-alan { display: grid; gap: 4px; flex: 1 1 160px; }
.durum { margin: 8px 0 0; min-height: 1.5em; font-family: var(--mono); font-size: 12px; color: var(--yesil); }
.hatalar { margin: 6px 0 0; padding-left: 18px; color: #ffb1b1; font-size: 13px; }

.svgler { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svg-kutu { margin: 0; display: grid; gap: 6px; min-width: 0; }
.svg-kutu.genis { grid-column: 1 / -1; }
.svg-kutu img { width: 100%; height: auto; display: block; }
.svg-kutu figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 600px) { .svgler { grid-template-columns: minmax(0, 1fr); } }

.parca summary { cursor: pointer; }
.parca pre {
  white-space: pre-wrap; word-break: break-all; font: 12px/1.5 var(--mono); color: var(--metin-2);
  background: #050c18; border: 1px solid var(--cizgi); padding: 10px; max-height: 260px; overflow: auto;
}
.ipucu { color: var(--metin-2); font-size: 13px; margin: 8px 0 0; }

.alt-bilgi {
  max-width: 1440px; margin: 8px auto 0; padding: 16px; border-top: 1px solid var(--cizgi);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--metin-2);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}