/* Yapboz Lab - Editör görünümü (2016 sürümünün tasarımı korunarak yenilendi) */

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  src: url('../font/Roboto-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  src: url('../font/Roboto-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  src: url('../font/Roboto-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  src: url('../font/Roboto-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Material-Design-Icons';
  src: url('../font/Material-Design-Icons.woff2') format('woff2'), url('../font/Material-Design-Icons.woff') format('woff');
}

:root {
  --yesil: #46920c;
  --yesil-koyu: #3a7a0a;
  --turuncu: #e47128;
  --turuncu-koyu: #c95f1c;
  --gri: #e5e5e5;
  --metin: #212121;
  --soluk: #757575;
  --kirmizi: #d32f2f;
  --basari: #2e7d32;
  --ust: 64px;
  --alt: 44px;
  --golge-1: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  --golge-2: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --golge-modal: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background: #fff;
  color: var(--metin);
  font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}

a {
  color: #039be5;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

/* İkonlar (eski sürümdeki Material Design Icons yazı tipi) */
.mdi {
  font-family: 'Material-Design-Icons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.mdi-menu:before { content: '\e8af'; }
.mdi-edit:before { content: '\e80a'; }
.mdi-download:before { content: '\e7b2'; }
.mdi-upload:before { content: '\e7b3'; }
.mdi-delete:before { content: '\e621'; }
.mdi-paint:before { content: '\e793'; }
.mdi-settings:before { content: '\e672'; }
.mdi-cart:before { content: '\e676'; }
.mdi-assignment:before { content: '\e615'; }
.mdi-help:before { content: '\e634'; }
.mdi-check:before { content: '\e8a7'; }
.mdi-cloud-upload:before { content: '\e7b0'; }
.mdi-extension:before { content: '\e629'; }
.mdi-copy:before { content: '\e706'; }
.mdi-usb:before { content: '\e773'; }
.mdi-yukari:before { content: '\e7c4'; }
.mdi-asagi:before { content: '\e7c1'; }
.mdi-new:before { content: '\e701'; }
.mdi-close:before { content: '\e8aa'; }

/* ------------------------------------------------------------------ */
/* Üst menü (yeşil çubuk)                                               */
/* ------------------------------------------------------------------ */
.ust-cubuk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ust);
  background: var(--yesil);
  color: #fff;
  display: flex;
  align-items: center;
  box-shadow: var(--golge-1);
  z-index: 50;
  padding-right: 8px;
}

.menu-dugme {
  width: 150px;
  height: var(--ust);
  flex: none;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 34px;
}
.menu-dugme:hover {
  background: rgba(255, 255, 255, 0.1);
}

.baslik {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
  white-space: nowrap;
}
.uygulama-adi {
  color: #fff;
  font-size: 32px;
  font-weight: 300;
}
.surum {
  color: #000;
  font-size: 15px;
}
.proje-adi-kap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.proje-adi {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: #fff;
  font-size: 24px;
  font-style: italic;
  font-weight: 300;
  width: 15ch;
  min-width: 6ch;
  max-width: 34vw;
  padding: 0 4px;
  outline: none;
}
.proje-adi:hover,
.proje-adi:focus {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}
.proje-adi-kap .mdi {
  font-size: 20px;
  opacity: 0.9;
}

.ust-baglantilar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
}
.ust-baglantilar a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 15px;
  color: #fff;
  font-size: 15px;
  transition: background-color 0.3s;
}
.ust-baglantilar a:hover {
  background: rgba(0, 0, 0, 0.1);
}
.ust-baglantilar .mdi {
  font-size: 26px;
}

/* ------------------------------------------------------------------ */
/* Sol yan menü                                                        */
/* ------------------------------------------------------------------ */
.yan-perde {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}
.yan-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: #fff;
  box-shadow: var(--golge-1);
  transform: translateX(-105%);
  transition: transform 0.3s ease;
  z-index: 100;
  overflow-y: auto;
}
.yan-menu.acik {
  transform: none;
}
.yan-logo img {
  display: block;
  width: 100%;
}
.yan-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.yan-menu a {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  line-height: 56px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 15px;
}
.yan-menu a:hover {
  background: rgba(0, 0, 0, 0.05);
}
.yan-menu a .mdi {
  font-size: 26px;
  color: #616161;
  width: 26px;
}
.yan-menu .ok {
  margin-left: auto;
}
#yanProjeler a {
  padding-left: 74px;
  line-height: 44px;
  font-size: 14px;
}
#yanProjeler .grup {
  padding: 8px 24px 2px 74px;
  font-size: 12px;
  color: var(--soluk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
/* Uyarı şeridi                                                        */
/* ------------------------------------------------------------------ */
.uyari-seridi {
  position: fixed;
  top: var(--ust);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff3cd;
  color: #6b4c00;
  border-bottom: 1px solid #f0d58a;
  font-size: 14px;
  padding: 6px 16px 6px 160px;
}

/* ------------------------------------------------------------------ */
/* Çalışma alanı                                                       */
/* ------------------------------------------------------------------ */
.calisma {
  position: fixed;
  top: var(--ust);
  left: 0;
  right: 0;
  bottom: var(--alt);
}
body.seritli .calisma {
  top: calc(var(--ust) + 32px);
}
body.panel-acik .calisma {
  bottom: var(--alt-acik, 300px);
}
.blok-alani {
  position: absolute;
  inset: 0;
}

/* Sağ üstteki yuvarlak düğmeler */
.ide-dugmeleri {
  position: absolute;
  top: 26px;
  right: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 20;
}
.yuvarlak {
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  box-shadow: var(--golge-2);
  transition: box-shadow 0.25s, transform 0.15s, background-color 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  white-space: nowrap;
  font-family: 'Roboto', sans-serif;
}
.yuvarlak:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.2);
}
.yuvarlak:active {
  transform: scale(0.96);
}
.yuvarlak:disabled {
  opacity: 0.55;
  cursor: progress;
}
.yuvarlak span {
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
}
.yuvarlak .mdi {
  font-size: 28px;
}
.yuvarlak.kod-dugme {
  width: 80px;
  height: 80px;
  background: var(--turuncu);
  font-size: 23px;
  font-weight: 400;
}
.yuvarlak.kod-dugme:hover {
  background: var(--turuncu-koyu);
}
.yuvarlak.yukle {
  width: 80px;
  height: 80px;
  background: var(--yesil);
}
.yuvarlak.yukle .mdi {
  font-size: 32px;
}
.yuvarlak.yukle:hover {
  background: var(--yesil-koyu);
}
.yuvarlak.kucuk-yuvarlak {
  width: 60px;
  height: 60px;
  background: #62aeb2;
}
.yuvarlak.kucuk-yuvarlak:hover {
  background: #4c9a9e;
}

/* ------------------------------------------------------------------ */
/* Kod paneli (sağdan açılır)                                          */
/* ------------------------------------------------------------------ */
.kod-paneli {
  position: absolute;
  top: 118px;
  right: 0;
  bottom: 0;
  width: max(27%, 380px);
  max-width: 100%;
  z-index: 30;
  background: transparent;
  padding: 14px 14px 14px 0;
  display: flex;
  flex-direction: column;
}
.kod-paneli .kapat {
  position: absolute;
  top: -8px;
  right: 22px;
  font-size: 36px;
  color: #818181;
  line-height: 1;
  z-index: 2;
}
.kod-paneli .kapat:hover {
  color: #333;
}
.katlanir {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: var(--golge-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.katlanir > li {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid #ddd;
}
.katlanir > li.acik {
  flex: 1;
}
.katlanir-baslik {
  display: flex;
  align-items: center;
  min-height: 3rem;
  line-height: 3rem;
  padding: 0 1rem 0 0;
  cursor: pointer;
  background: #fff;
  font-size: 15px;
}
.katlanir-baslik:hover {
  background: #f5f5f5;
}
.katlanir-logo {
  width: 3rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  margin-right: 0.6rem;
}
.kart-etiketi {
  margin-left: auto;
  font-size: 12px;
  color: var(--soluk);
}
.katlanir-govde {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border-top: 1px solid #ddd;
}
li.acik > .katlanir-govde {
  display: flex;
}
.kod-araclari {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  background: #fafafa;
  border-bottom: 1px solid #eee;
}
.kod {
  margin: 0;
  flex: 1;
  overflow: auto;
  padding: 10px 0;
  background: #fff;
  font-family: 'Droid Sans Mono', Consolas, 'Courier New', monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #434f54;
  -webkit-user-select: text;
  user-select: text;
}
.kod .satir {
  display: block;
  padding: 0 12px 0 52px;
  position: relative;
  white-space: pre;
}
.kod .satir::before {
  content: attr(data-n);
  position: absolute;
  left: 0;
  width: 40px;
  text-align: right;
  color: #b0b8bc;
}
.kod .satir.hatali {
  background: #fdbebe;
}
/* Arduino IDE renkleri (eski prettify/arduino.css ile aynı) */
.k-yorum { color: #95a5a6; }
.k-metin { color: #005c5f; }
.k-onislem { color: #5e6d03; }
.k-sayi { color: #8a7b52; }
.k-anahtar { color: #728e00; }
.k-tur { color: #00979c; }
.k-fonk { color: #d35400; }

.xml-alani {
  flex: 1;
  border: 0;
  resize: none;
  padding: 10px 12px;
  font-family: 'Droid Sans Mono', Consolas, monospace;
  font-size: 12px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  min-height: 160px;
}

/* ------------------------------------------------------------------ */
/* Düz düğmeler (Materialize "btn-flat" benzeri)                       */
/* ------------------------------------------------------------------ */
.duz-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  border-radius: 2px;
  padding: 0 1rem;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  color: #343434;
}
.duz-dugme:hover {
  background: rgba(0, 0, 0, 0.08);
}
.duz-dugme:disabled {
  opacity: 0.5;
  cursor: progress;
}
.duz-dugme .mdi {
  font-size: 18px;
}
.duz-dugme.dolu {
  background: var(--yesil);
  color: #fff;
  box-shadow: var(--golge-1);
}
.duz-dugme.dolu:hover {
  background: var(--yesil-koyu);
}
.kod-araclari .duz-dugme {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  padding: 0 0.6rem;
}

/* ------------------------------------------------------------------ */
/* Alt çubuk                                                           */
/* ------------------------------------------------------------------ */
.alt-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--alt);
  background: #fff;
  z-index: 45;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}
body.panel-acik .alt-panel {
  height: var(--alt-acik, 300px);
}
.alt-baslik {
  flex: none;
  height: var(--alt);
  background: var(--yesil);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 10px;
}
.alt-ac {
  border: 0;
  background: transparent;
  color: #000;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 0 14px 0 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.alt-ac:hover .alt-yazi {
  text-decoration: underline;
}
.alt-ac .soru {
  width: 3rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  font-style: italic;
  color: #fff;
}
.alt-ac .ok {
  font-size: 22px;
  color: #fff;
}
.durum {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  font-size: 14px;
  color: #fff;
}
.durum span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.durum.hata span {
  background: var(--kirmizi);
  padding: 1px 8px;
  border-radius: 2px;
}
.durum.basari span {
  background: #1b5e20;
  padding: 1px 8px;
  border-radius: 2px;
}
.ilerleme {
  width: 160px;
  height: 6px;
  flex: none;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.ilerleme-dolu {
  height: 100%;
  width: 0;
  background: #fff;
  transition: width 0.2s;
}
.ilerleme.belirsiz .ilerleme-dolu {
  width: 35%;
  position: absolute;
  animation: kay 1.1s ease-in-out infinite;
}
@keyframes kay {
  from { left: -35%; }
  to { left: 100%; }
}

.kart-alani {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  flex: none;
}
.kart-alani select {
  height: 30px;
  border: 0;
  border-radius: 2px;
  padding: 0 6px;
  background: #fff;
  color: var(--metin);
  cursor: pointer;
}
.port {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 2px;
  background: var(--turuncu);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  max-width: 240px;
}
.port span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.port:hover {
  background: var(--turuncu-koyu);
}
.port.bagli {
  background: rgba(255, 255, 255, 0.2);
}
.port .mdi {
  font-size: 18px;
}

.alt-govde {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.alt-panel.kucuk .alt-govde {
  display: none;
}
.sekmeler {
  flex: none;
  display: flex;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
}
.sekme {
  border: 0;
  background: transparent;
  padding: 8px 20px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--soluk);
  border-bottom: 2px solid transparent;
}
.sekme.secili {
  color: var(--yesil);
  border-bottom-color: var(--yesil);
}
.nokta {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bdbdbd;
  margin-left: 4px;
}
.nokta.acik {
  background: #43a047;
}
.sekme-icerik {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cikti {
  flex: 1;
  overflow: auto;
  padding: 8px 14px;
  font-family: Consolas, 'Droid Sans Mono', monospace;
  font-size: 13px;
  -webkit-user-select: text;
  user-select: text;
}
.cikti .s {
  white-space: pre-wrap;
}
.cikti .hata { color: var(--kirmizi); }
.cikti .basari { color: var(--basari); font-weight: 700; }
.cikti .ipucu { color: #8a5a00; }
.cikti .soluk { color: var(--soluk); }
.cikti details { margin: 4px 0; }
.cikti summary { cursor: pointer; color: var(--soluk); }

.monitor-arac,
.monitor-gonder {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
.monitor-arac select,
.monitor-gonder select,
.monitor-gonder input {
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: 0 6px;
  background: #fff;
}
.monitor-gonder input {
  flex: 1;
  min-width: 0;
}
.monitor-arac .duz-dugme,
.monitor-gonder .duz-dugme {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.onay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.bosluk {
  flex: 1;
}
.monitor-cikti {
  flex: 1;
  margin: 0;
  overflow: auto;
  padding: 6px 12px;
  background: #263238;
  color: #e0f2f1;
  font-family: Consolas, 'Droid Sans Mono', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------------ */
/* Pencereler (Materialize "modal" benzeri)                            */
/* ------------------------------------------------------------------ */
.dialog {
  border: 0;
  padding: 0;
  width: min(55%, 720px);
  min-width: min(480px, calc(100vw - 32px));
  max-height: 80vh;
  background: #fafafa;
  border-radius: 2px;
  box-shadow: var(--golge-modal);
  color: var(--metin);
}
.dialog.genis {
  width: min(70%, 900px);
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.dialog form {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.dialog-icerik {
  padding: 24px;
  overflow: auto;
  -webkit-user-select: text;
  user-select: text;
}
.dialog h4 {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}
.dialog p {
  margin: 0 0 14px;
}
.dialog ol,
.dialog ul {
  padding-left: 22px;
}
.dialog li {
  margin-bottom: 6px;
}
#dialogGirdi {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #9e9e9e;
  background: transparent;
  height: 3rem;
  font-size: 1rem;
  outline: none;
}
#dialogGirdi:focus {
  border-bottom: 2px solid var(--yesil);
}
.dialog-dugmeler {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  padding: 4px 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

/* Projeler ve ayarlar */
.ornekler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.ornek {
  text-align: left;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-left: 5px solid var(--yesil);
  border-radius: 2px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ornek:hover {
  box-shadow: var(--golge-1);
}
.ornek strong {
  font-size: 15px;
}
.ornek span {
  font-size: 13px;
  color: var(--soluk);
}
.ornek.gelismis {
  border-left-color: #607080;
}
.ornek-grup {
  margin: 18px 0 8px;
  font-size: 13px;
  color: var(--soluk);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ornek-grup:first-child {
  margin-top: 0;
}
.ayarlar label.alan {
  display: block;
  color: #9e9e9e;
  font-size: 13px;
  margin: 14px 0 4px;
}
.ayarlar select {
  width: 100%;
  height: 2.6rem;
  border: 0;
  border-bottom: 1px solid #9e9e9e;
  background: transparent;
  font-size: 1rem;
}
.ayarlar .satir-alan {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ayarlar .onay {
  margin-top: 16px;
  font-size: 15px;
}
.ayarlar .not {
  font-size: 13px;
  color: var(--soluk);
  margin: 4px 0 0 24px;
}

/* Bildirim (Materialize "toast") */
.bildirim {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alt) + 18px);
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 32px));
  background: #323232;
  color: #fff;
  padding: 12px 24px;
  border-radius: 2px;
  min-height: 48px;
  display: flex;
  align-items: center;
  box-shadow: var(--golge-1);
  z-index: 200;
  font-size: 15px;
}
.bildirim.hata {
  background: #c62828;
}
.bildirim.basari {
  background: #2e7d32;
}
body.panel-acik .bildirim {
  bottom: calc(var(--alt-acik, 300px) + 18px);
}

/* ------------------------------------------------------------------ */
/* Blockly (eski editördeki gibi gri araç kutusu)                      */
/* ------------------------------------------------------------------ */
.blocklyToolbox,
.blocklyToolboxDiv {
  background: #e5e5e5 !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);
}
.blocklyToolboxCategory,
.blocklyTreeRow {
  height: 36px !important;
  line-height: 36px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}
.blocklyTreeLabel,
.blocklyToolboxCategoryLabel {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  color: #212121;
}
.blocklyToolboxSelected .blocklyTreeLabel,
.blocklyToolboxSelected .blocklyToolboxCategoryLabel,
.blocklyTreeSelected .blocklyTreeLabel {
  color: #fff;
}
.blocklyToolboxCategoryIcon,
.blocklyTreeIcon {
  width: 14px !important;
  height: 36px !important;
  background-image: none !important;
  display: inline-block;
  vertical-align: top;
  margin-left: 4px;
}
.blocklyToolboxCategoryIconClosed::before,
.blocklyTreeIconClosed::before {
  content: '▶';
  font-size: 13px;
  color: #212121;
}
.blocklyToolboxCategoryIconOpen::before,
.blocklyTreeIconOpen::before {
  content: '▼';
  font-size: 13px;
  color: #212121;
}
.blocklyToolboxSelected .blocklyToolboxCategoryIconClosed::before,
.blocklyToolboxSelected .blocklyToolboxCategoryIconOpen::before,
.blocklyTreeSelected .blocklyTreeIconClosed::before,
.blocklyTreeSelected .blocklyTreeIconOpen::before {
  color: #fff;
}
.blocklyText,
.blocklyHtmlInput,
.blocklyDropdownText {
  font-family: 'Roboto', sans-serif !important;
}
.blocklyScrollbarHandle {
  fill: #6dbae8 !important;
  fill-opacity: 0.4 !important;
}
.blocklyMainBackground {
  stroke-width: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Dar ekranlar                                                        */
/* ------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .menu-dugme {
    width: 72px;
  }
  .uyari-seridi {
    padding-left: 82px;
  }
}
@media (max-width: 1100px) {
  .ust-baglantilar span {
    display: none;
  }
  .ust-baglantilar a {
    padding: 0 12px;
  }
  .alt-ac .alt-yazi {
    display: none;
  }
}
@media (max-width: 760px) {
  :root {
    --ust: 56px;
  }
  .menu-dugme {
    width: 52px;
    font-size: 28px;
  }
  .uygulama-adi {
    font-size: 24px;
  }
  .surum {
    display: none;
  }
  .proje-adi {
    font-size: 17px;
    width: 9ch;
  }
  .proje-adi-kap .mdi {
    display: none;
  }
  .ust-baglantilar a {
    padding: 0 8px;
  }
  .ust-baglantilar .mdi {
    font-size: 22px;
  }
  .ide-dugmeleri {
    top: 12px;
    right: 14px;
    gap: 10px;
  }
  .yuvarlak.kod-dugme,
  .yuvarlak.yukle {
    width: 60px;
    height: 60px;
    font-size: 17px;
  }
  .yuvarlak.kucuk-yuvarlak {
    width: 48px;
    height: 48px;
  }
  .yuvarlak span {
    display: none;
  }
  .kart-alani label,
  .durum span {
    display: none;
  }
  .kod-paneli {
    width: 100%;
    padding-left: 14px;
    top: 76px;
  }
  .dialog,
  .dialog.genis {
    width: calc(100vw - 32px);
  }
  .blocklyTreeLabel,
  .blocklyToolboxCategoryLabel {
    font-size: 14px !important;
  }
  .blocklyToolboxCategory,
  .blocklyTreeRow {
    height: 30px !important;
    line-height: 30px !important;
  }
  .proje-adi {
    max-width: 40vw;
  }
}
@media (max-width: 480px) {
  .ust-baglantilar li:nth-child(4) {
    display: none;
  }
  .uygulama-adi {
    display: none;
  }
  .port {
    max-width: 110px;
  }
}