/* ==========================================================================
   Kodkart Studio — Uygulama Arayüzü
   SPDX-License-Identifier: GPL-3.0-or-later · Telif ve lisans: COPYRIGHT.md, LICENSE
   ========================================================================== */
/* Renkler: koyu tema varsayılandır; açık tema aşağıdaki :root[data-theme="light"] ile değerleri değiştirir
   (seçim app.js → setTheme, sayfa açılırken index.html'deki <head> betiği uygular).
   Kablo Sırası paneli ve sensör sahneleri (gece/gündüz, beher...) her iki temada koyu kalır:
   bu öğeler koyu değerleri kendi üzerinde tanımlar, böylece içlerindeki var(--text) vb. koyu temadakiyle aynı olur. */
:root,
.wa-bar, .dv-svg, .lv-svg, .sv-svg, .wv-svg, .sl-svg, .us-svg {
  --bg: #060a13;
  --bg-2: #0a1020;
  --panel: #0c1322;
  --panel-2: #101a2e;
  --panel-3: #16223a;
  --line: rgba(148, 163, 184, 0.13);
  --line-strong: rgba(148, 163, 184, 0.24);
  --text: #e6edf7;
  --muted: #8b9ab3;
  --dim: #5b6b86;
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --brand: #facc15;
  --brand-soft: rgba(250, 204, 21, 0.12);
  --ok: #22c55e;
  --danger: #ef4444;
  --brand-fill: #facc15;       /* Dolgu olarak marka sarısı (üstünde koyu yazı); --brand yazı rengidir */
  --on-accent: #04131a;        /* Turkuaz dolgunun üstündeki yazı */
  --text-2: #c3cee0;
  --text-strong: #fff;
  --ok-text: #86efac;
  --green-text: #4ade80;
  --warn-text: #fbbf24;
  --info-text: #67e8f9;
  --danger-text: #fca5a5;
  --danger-text-2: #fecaca;
  --red-text: #f87171;
  --violet-text: #c4b5fd;
  --violet-text-2: #ddd6fe;
  --violet: #a78bfa;           /* Projeler sekmesi */
  --topbar-bg: rgba(8, 13, 26, 0.82);
  --statusbar-bg: rgba(6, 10, 19, 0.9);
  --head-bg: rgba(8, 13, 26, 0.45);
  --float-bg: rgba(8, 13, 26, 0.85);   /* Kart alanının üstündeki yuvarlak düğmeler, rehber yazıları */
  --pop-bg: rgba(12, 19, 34, 0.97);    /* Açılır pencereler, menüler, ipuçları */
  --pop-solid: rgb(12, 19, 34);
  --panel-grad: linear-gradient(180deg, rgba(16, 26, 46, 0.92), rgba(12, 19, 34, 0.92));
  --console-grad: linear-gradient(180deg, rgba(16, 26, 46, 0.92), rgba(10, 16, 30, 0.95));
  --card-grad: linear-gradient(180deg, rgba(22, 34, 58, 0.85), rgba(14, 22, 38, 0.9));
  --modal-grad: linear-gradient(180deg, #121d33, #0c1322);
  --backdrop: rgba(3, 6, 12, 0.6);
  --code-bg: #070c18;
  --code-text: #cbd5e1;
  --code-ln: #3b4a63;
  --log-text: #b8c4d8;
  --scroll-thumb: #22304a;
  --toolbox-bg: rgba(8, 13, 26, 0.75);
  --flyout-bg: #0e1830;
  --kit-bg: radial-gradient(circle at 50% 45%, #16223a 0%, #070b14 75%);
  --board-shadow: rgba(0, 0, 0, 0.7);
  --radius: 14px;
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}
:root { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f7;
  --bg-2: #edf1f6;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --panel-3: #e6ecf4;
  --line: rgba(15, 23, 42, 0.1);
  --line-strong: rgba(15, 23, 42, 0.18);
  --text: #0f172a;
  --muted: #475569;
  --dim: #64748b;
  --accent: #0e7490;
  --accent-soft: rgba(8, 145, 178, 0.1);
  --brand: #a16207;
  --brand-soft: rgba(202, 138, 4, 0.12);
  --ok: #16a34a;
  --danger: #dc2626;
  --on-accent: #ffffff;
  --text-2: #334155;
  --text-strong: #0f172a;
  --ok-text: #15803d;
  --green-text: #15803d;
  --warn-text: #b45309;
  --info-text: #0e7490;
  --danger-text: #b91c1c;
  --danger-text-2: #991b1b;
  --red-text: #dc2626;
  --violet-text: #6d28d9;
  --violet-text-2: #5b21b6;
  --violet: #7c3aed;
  --topbar-bg: rgba(255, 255, 255, 0.86);
  --statusbar-bg: rgba(255, 255, 255, 0.9);
  --head-bg: rgba(241, 245, 249, 0.75);
  --float-bg: rgba(255, 255, 255, 0.92);
  --pop-bg: rgba(255, 255, 255, 0.98);
  --pop-solid: #ffffff;
  --panel-grad: linear-gradient(180deg, #ffffff, #fbfcfe);
  --console-grad: linear-gradient(180deg, #ffffff, #fbfcfe);
  --card-grad: linear-gradient(180deg, #ffffff, #f8fafc);
  --modal-grad: linear-gradient(180deg, #ffffff, #f8fafc);
  --backdrop: rgba(15, 23, 42, 0.35);
  --code-bg: #f8fafc;
  --code-text: #1e293b;
  --code-ln: #94a3b8;
  --log-text: #334155;
  --scroll-thumb: #cbd5e1;
  --toolbox-bg: rgba(248, 250, 252, 0.96);
  --flyout-bg: #eef2f7;
  --kit-bg: radial-gradient(circle at 50% 45%, #f8fafc 0%, #d9e1ec 75%);
  --board-shadow: rgba(15, 23, 42, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* Kart alanında ve arayüz kontrollerinde sürüklerken yazılar seçilmesin
   (Seri Monitör ve Arduino C++ görünümü kopyalanabilsin diye seçilebilir kalır) */
.kit-panel, .kit-panel *, .topbar, .panel-head, .statusbar, .sensor-pop label {
  -webkit-user-select: none;
  user-select: none;
}

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, rgba(250, 204, 21, 0.07), transparent 60%),
    linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

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

.i {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Uygulama İskeleti ---------- */
/* iPad / iPhone Safari'de 100vh araç çubukları gizliymiş gibi hesaplanır ve alt kısım
   (durum çubuğu, tam ekranda kart alanının alt köşesindeki düğmeler) ekran dışında kalır.
   --app-h görünen pencere yüksekliğidir (app.js → syncAppHeight); yoksa 100dvh. */
.app {
  height: 100vh;
  height: var(--app-h, 100dvh);
  display: grid;
  grid-template-rows: 58px 1fr auto 28px;
}

/* ---------- Üst Çubuk ---------- */
.topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--brand) 70%, transparent);
  opacity: 0.55;
}

.tb-left, .tb-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-right { justify-content: flex-end; }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { position: relative; display: block; width: 32px; height: 32px; }
.brand-logo {
  display: block; width: 32px; height: 32px;
  filter: drop-shadow(0 2px 6px rgba(37, 120, 255, 0.35));
  transition: filter 0.3s;
}
/* Parıltı: logonun şekliyle maskelenmiş, soldan sağa geçen beyaz ışık bandı */
.brand-mark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: url(logo.svg) center / contain no-repeat; mask: url(logo.svg) center / contain no-repeat;
  opacity: 0;
}
/* Üzerine gelince: logo yaylanarak eğilip zıplar, ışık geçer, slogan kelimeleri sırayla hoplar */
.brand:hover .brand-mark { animation: brandHop 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) forwards; }
.brand:hover .brand-logo { filter: drop-shadow(0 4px 10px rgba(37, 120, 255, 0.55)); }
.brand:hover .brand-mark::after { animation: brandShine 0.8s ease-out 0.1s; }
.brand:hover .brand-tag > span { display: inline-block; animation: brandWord 0.45s cubic-bezier(0.3, 0.7, 0.4, 1); }
.brand:hover .brand-tag > span:nth-child(2) { animation-delay: 0.08s; }
.brand:hover .brand-tag > span:nth-child(3) { animation-delay: 0.16s; }
@keyframes brandHop {
  0%   { transform: none; }
  30%  { transform: translateY(-3px) rotate(-12deg) scale(1.12); }
  55%  { transform: translateY(-1px) rotate(7deg) scale(1.06); }
  78%  { transform: translateY(-1px) rotate(-3deg) scale(1.08); }
  100% { transform: translateY(-1px) rotate(0) scale(1.08); }
}
@keyframes brandShine {
  0%   { opacity: 1; background-position: 150% 0; }
  100% { opacity: 1; background-position: -60% 0; }
}
@keyframes brandWord {
  40% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark, .brand:hover .brand-mark::after, .brand:hover .brand-tag > span { animation: none; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
/* Ad: renkli sloganın üstünde sade, kalın ve geniş aralıklı; altındaki ince çizgi ikisini ayırır */
.brand-name {
  padding-bottom: 3px; border-bottom: 1px solid var(--line-strong);
  font-weight: 900; font-size: 16px; letter-spacing: 2.4px; color: var(--text-strong);
}
.brand-tag {
  margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}
/* Slogan kelimeleri logodaki kartların renginde: mavi (ön), turuncu, yeşil (arka) */
.bt-blue { color: #2f9bff; }
.bt-orange { color: #ff9a1f; }
.bt-green { color: #2fd69a; }
:root[data-theme="light"] .bt-blue { color: #0b5fe8; }
:root[data-theme="light"] .bt-orange { color: #e2600b; }
:root[data-theme="light"] .bt-green { color: #0c8f60; }

.tb-divider { width: 1px; height: 26px; background: var(--line-strong); }

/* Proje: ad + kayıt durumu + Proje menüsü (▾) */
.project {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  color: var(--muted);
}
.project input {
  width: 160px; min-width: 60px; max-width: 160px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 8px; font-weight: 600; font-size: 13.5px; color: var(--text);
  outline: none; transition: border-color 0.15s, background 0.15s;
  /* Sığmayan ad "…" ile biter; düzenlerken (odakta) tam metin kaydırılabilir */
  text-overflow: ellipsis;
}
/* Destekleyen tarayıcılarda kutu yazı kadar genişler (kayıt durumu adın hemen yanında durur);
   daralma kademeleri yalnızca üst sınırı (max-width) değiştirir */
@supports (field-sizing: content) {
  .project input { field-sizing: content; width: auto; }
}
.project input:hover { border-color: var(--line); }
.project input:focus { border-color: var(--accent); background: var(--panel); text-overflow: clip; }

/* Kayıt durumu (proje adının yanında): kayıt sessizce yapılır, yalnızca kayıt başarısız olunca
   kırmızı nokta + "Kaydedilemedi" görünür (sonraki denemede sarı nokta "Kaydediliyor…") */
.save-state:not(.error) { display: none; }
.save-state {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; color: var(--dim); white-space: nowrap;
}
.save-state::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
}
.save-state.error::before { background: var(--danger); }
.save-state.saving::before { background: var(--brand); }

/* Üst çubuktaki çerçevesiz simge düğmeler (Proje ▾, ⋯) */
.tb-icon {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.tb-icon .i { width: 16px; height: 16px; }
.tb-icon:hover, .tb-icon[aria-expanded="true"] { color: var(--text); background: var(--panel-2); }
#btnMore .i { fill: currentColor; stroke: none; }
/* Proje ▾ açıkken ok yukarı döner */
#btnProjectMenu .i { transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
#btnProjectMenu[aria-expanded="true"] .i { transform: rotate(180deg); }

/* Üst çubuk menüleri: düğmesinin altında açılır (Kablo / Modüller menüleriyle aynı yüzey).
   Ok ucu düğmenin ortasını gösterir (düğme 30px → orta 15px). Açılış / kapanış: .open sınıfı
   (app.js topbarMenu) saydamlık + kayma geçişini başlatır, öğeler sırayla belirir. */
.tb-pop { position: relative; }
.tb-menu {
  position: absolute; top: calc(100% + 10px); left: -6px; z-index: 40; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px;
  background: var(--pop-bg); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: 21px 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tb-menu::before {
  content: ''; position: absolute; top: -6px; left: 15px; width: 10px; height: 10px;
  background: var(--pop-bg); border: 1px solid var(--line-strong); border-right: 0; border-bottom: 0;
  border-top-left-radius: 2px; transform: rotate(45deg);
}
.tb-menu.open { opacity: 1; transform: none; pointer-events: auto; }
.tb-menu[hidden] { display: none; }
.tb-menu.end { left: auto; right: -6px; transform-origin: calc(100% - 21px) 0; }
.tb-menu.end::before { left: auto; right: 15px; }
.tb-menu.open > * { animation: tbItemIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.tb-menu.open > :nth-child(2) { animation-delay: 0.03s; }
.tb-menu.open > :nth-child(3) { animation-delay: 0.06s; }
.tb-menu.open > :nth-child(4) { animation-delay: 0.09s; }
.tb-menu.open > :nth-child(n+5) { animation-delay: 0.12s; }
@keyframes tbItemIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .tb-menu, #btnProjectMenu .i { transition: none; }
  .tb-menu.open > * { animation: none; }
}
.tb-menu-item {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.tb-menu-item .i { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.tb-menu-item span { flex: 1; }
.tb-menu-item:hover, .tb-menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.tb-menu-item:hover .i { color: var(--accent); }
.tb-menu-item small { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tb-menu-item kbd { background: transparent; color: var(--dim); font-weight: 500; }
.tb-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* Tema anahtarı: solda geçerli temanın simgesi (güneş / ay dönerek yer değiştirir), sağda kayan anahtar
   (açık = koyu tema). Durum <html data-theme> ile çizilir; sayfa açılırken animasyon oynamaz. */
.theme-btn .ti-icons { position: relative; flex: none; width: 15px; height: 15px; }
.theme-btn .ti-icons .i {
  position: absolute; inset: 0;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-btn .ti-sun { opacity: 0; transform: rotate(-90deg) scale(0.4); }
:root[data-theme="light"] .theme-btn .ti-sun { opacity: 1; transform: none; }
:root[data-theme="light"] .theme-btn .ti-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
.theme-btn .theme-switch {
  position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: var(--accent); transition: background-color 0.25s ease;
}
.theme-switch .ts-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translateX(14px); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
:root[data-theme="light"] .theme-switch { background: #cbd5e1; }
:root[data-theme="light"] .theme-switch .ts-knob { transform: none; }
.theme-btn:active .ts-knob { width: 19px; }
:root:not([data-theme="light"]) .theme-btn:active .ts-knob { transform: translateX(11px); }
@media (prefers-reduced-motion: reduce) {
  .theme-btn .ti-icons .i, .theme-switch, .theme-switch .ts-knob { transition: none; }
}

/* Sayfa sekmeleri: her sekmenin kendi rengi (simge + yazı), açık olanın altında o renkte çizgi
   (üst çubuğun alt kenarına oturur). Dar ekranda yazı gizlenir, simge kalır. */
.page-tabs { display: flex; align-self: stretch; gap: 4px; }
.page-tab {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 14px; border: 0; background: transparent;
  color: var(--tab-c); opacity: 0.78; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: opacity 0.15s;
}
.page-tab[data-page="studio"] { --tab-c: var(--accent); }
.page-tab[data-page="learn"] { --tab-c: var(--green-text); }
.page-tab[data-page="tasks"] { --tab-c: var(--warn-text); }
.page-tab[data-page="projects"] { --tab-c: var(--violet); }
.page-tab .i { width: 16px; height: 16px; }
.page-tab:hover, .page-tab.active { opacity: 1; }
.page-tab::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--tab-c);
  transform: scaleX(0); transition: transform 0.2s ease;
}
.page-tab.active::after { transform: scaleX(1); }
.page-tab:focus-visible { outline: 2px solid var(--tab-c); outline-offset: -8px; border-radius: 10px; }

/* Görünüm seçici: üç simge, yalnızca Stüdyo'da */
.view-switch {
  display: flex; gap: 2px; padding: 3px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.app.page-open .view-switch { display: none; }
.view-switch button {
  display: grid; place-items: center;
  width: 32px; height: 26px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.view-switch button .i { width: 15px; height: 15px; }
.view-switch button:hover { color: var(--text); }
.view-switch button.active {
  background: var(--panel-3); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.25);
}

.board-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.board-chip .dot, .sb-item .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}
/* Kodkart bağlantı düğmesi (Canlı mod): off = yalnızca simülatör, connecting, live = USB ile bağlı */
button.board-chip { height: 34px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
button.board-chip .i { width: 15px; height: 15px; }
button.board-chip:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.board-chip[data-status="off"] .dot { background: #64748b; box-shadow: none; }
.board-chip[data-status="connecting"] { color: var(--warn-text); border-color: rgba(251, 191, 36, 0.45); }
.board-chip[data-status="connecting"] .dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; animation: bcPulse 0.8s ease-in-out infinite; }
.board-chip[data-status="live"] { color: var(--ok-text); border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.08); }
.board-chip[data-status="live"] .dot { animation: bcPulse 1.6s ease-in-out infinite; }
.board-chip[data-status="busy"] { color: var(--info-text); border-color: rgba(34, 211, 238, 0.5); }
.board-chip[data-status="busy"] .dot { background: #22d3ee; box-shadow: 0 0 8px #22d3ee; animation: bcPulse 0.6s ease-in-out infinite; }
.board-chip[data-status="nofw"] { color: var(--warn-text); border-color: rgba(251, 191, 36, 0.45); }
.board-chip[data-status="nofw"] .dot { background: #fbbf24; box-shadow: none; }
/* Kart modu seçici (yalnızca Kodkart bağlıyken): Canlı | Yükle, aynı anda yalnızca biri seçili */
.board-mode {
  display: flex; gap: 2px; padding: 3px; height: 34px; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.board-mode[hidden] { display: none; }
.board-mode button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 11px; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.board-mode button .i { width: 14px; height: 14px; }
.board-mode button:hover { color: var(--text); }
.board-mode .bm-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.board-mode button[data-mode="live"].active { color: var(--ok-text); background: rgba(34, 197, 94, 0.14); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45); }
.board-mode button[data-mode="live"].active .bm-dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: bcPulse 1.6s ease-in-out infinite; }
.board-mode button[data-mode="upload"].active { color: var(--info-text); background: rgba(34, 211, 238, 0.14); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.45); }
/* Yükle modunda Çalıştır düğmesi "Karta Yükle" olur (camgöbeği, yükleme oku) */
.btn-run .i.run-upload { display: none; fill: none; stroke-width: 2.4; }
.app.board-upload .btn-run .run-play { display: none; }
.app.board-upload .btn-run .i.run-upload { display: block; }
.app.board-upload .btn-run {
  border-color: rgba(34, 211, 238, 0.6);
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  color: #04131a;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15), 0 6px 22px rgba(34, 211, 238, 0.28);
}
/* Yükle modunda simülasyon çalışmaz: Durdur gizlenir */
.app.board-upload #btnStop, .app.board-upload #btnFsStop { display: none; }
.app.board-upload .btn-run:hover { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 8px 28px rgba(34, 211, 238, 0.4); }
/* Yükleme ilerlemesi */
.bm-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bm-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); overflow: hidden; }
.bm-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #22c55e); transition: width 0.15s; }
.bm-progress span { min-width: 40px; text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.bm-prog { font-size: 12px; color: var(--muted); }
.bm-prog b { color: var(--text); }
.modal-message { white-space: pre-line; }
@keyframes bcPulse { 50% { opacity: 0.35; } }

/* Kodkart bağlantı penceresi */
.modal.board-modal { width: min(520px, 100%); }
.bm-steps { margin: 6px 0 2px; padding-left: 0; list-style: none; counter-reset: bm; display: grid; gap: 8px; }
.bm-steps li {
  counter-increment: bm; position: relative; padding: 8px 10px 8px 38px; border-radius: 10px;
  background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.bm-steps li::before {
  content: counter(bm); position: absolute; left: 10px; top: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--on-accent); background: var(--accent);
}
.bm-steps li b { color: var(--text); }
.bm-steps .ghost-btn { margin-top: 6px; }
.bm-error {
  margin-top: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.45;
  color: var(--danger-text-2); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4);
}
.bm-live { display: grid; gap: 8px; margin-top: 6px; }
.bm-io { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.bm-io span {
  padding: 4px 0; border-radius: 6px; text-align: center; font-family: var(--mono); font-size: 10.5px;
  background: rgba(148, 163, 184, 0.08); border: 1px solid var(--line); color: var(--muted);
}
.bm-io span.on { color: #04131a; background: #4ade80; border-color: #4ade80; }
.bm-io-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--dim); }

/* Düğmeler */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--panel-2); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 7px; }
.icon-btn.sm .i { width: 14px; height: 14px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.btn .i { width: 15px; height: 15px; }

.btn-run {
  border: 1px solid rgba(34, 197, 94, 0.6);
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #04130a;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 6px 22px rgba(34, 197, 94, 0.28);
}
.btn-run .i { fill: currentColor; }
.btn-run:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 8px 28px rgba(34, 197, 94, 0.4); }

.btn-stop {
  border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08);
  color: var(--danger-text);
}
.btn-stop .i { fill: currentColor; }
.btn-stop:hover:not(:disabled) { background: rgba(239, 68, 68, 0.16); }
.btn-stop:disabled { opacity: 0.4; cursor: not-allowed; }
/* Üst çubukta Durdur yalnızca program çalışırken, kare simge olarak görünür */
.topbar #btnStop { font-size: 0; gap: 0; padding: 0 11px; }
.topbar #btnStop .i { width: 14px; height: 14px; }
.topbar #btnStop:disabled { display: none; }
/* Program çalışırken Çalıştır "Yeniden Başlat" olur: üst çubukta yalnızca ↻ simgesi (yazı ipucunda) */
.btn-run .i.run-restart { display: none; fill: none; stroke-width: 2.4; }
.app.is-running:not(.board-upload) .topbar .btn-run { font-size: 0; gap: 0; padding: 0 11px; }
.app.is-running:not(.board-upload) .topbar .btn-run .run-play { display: none; }
.app.is-running:not(.board-upload) .topbar .btn-run .i.run-restart { display: block; width: 16px; height: 16px; }

.app.is-running .btn-run {
  background: linear-gradient(180deg, #16a34a, #15803d);
  animation: runPulse 1.6s ease-in-out infinite;
}
@keyframes runPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 14px rgba(34, 197, 94, 0.25); }
  50% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5), 0 0 30px rgba(34, 197, 94, 0.55); }
}

.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.ghost-btn .i { width: 14px; height: 14px; }
.ghost-btn:hover { color: var(--text); border-color: var(--line-strong); }
.ghost-btn.gold { color: var(--brand); border-color: rgba(250, 204, 21, 0.3); background: var(--brand-soft); }
.ghost-btn.gold:hover { border-color: rgba(250, 204, 21, 0.55); }

/* ---------- Çalışma Alanı ---------- */
.workbench {
  display: flex;
  min-height: 0;
  padding: 12px 12px 0;
}

.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--panel-grad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.code-panel { flex: 0 0 var(--split, 48%); }
.kit-panel { flex: 1 1 0; container-type: inline-size; }

.workbench[data-view="code"] .kit-panel,
.workbench[data-view="code"] .splitter,
.workbench[data-view="kit"] .code-panel,
.workbench[data-view="kit"] .splitter { display: none; }
.workbench[data-view="code"] .code-panel { flex: 1 1 0; }
/* Sayfa görünümleri (Öğren, Görevler, Projeler): çalışma panellerinin yerine tam sayfa açılır */
.projects-page, .learn-page, .tasks-page { display: none; }
.workbench[data-view="projects"] > :not(.projects-page),
.workbench[data-view="learn"] > :not(.learn-page),
.workbench[data-view="tasks"] > :not(.tasks-page) { display: none; }
.workbench[data-view="projects"] .projects-page,
.workbench[data-view="learn"] .learn-page,
.workbench[data-view="tasks"] .tasks-page { display: flex; flex: 1 1 0; margin-bottom: 12px; }
.app.page-open .console { display: none; }
/* Konsol gizlenince durum çubuğu "auto" satırına kaymasın: yüksekliği hep 28px kalır */
.app.page-open { grid-template-rows: 58px 1fr 28px; }
/* Sayfalarda çalışma alanına ait sayaçlar ve kayıt durumu gösterilmez */
.app.page-open #saveState,
.app.page-open #sbBlocks,
.app.page-open #sbWires { display: none; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 46px; padding: 0 10px 0 12px; flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: var(--head-bg);
}

.panel-title {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.panel-title .i { color: var(--accent); }

.chip {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--brand); background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.22);
}
.chip.cyan { color: var(--accent); background: var(--accent-soft); border-color: rgba(34, 211, 238, 0.22); }

.panel-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tool-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }

.tabs { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.tab .i { width: 14px; height: 14px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); background: var(--panel-3); border-color: var(--line-strong); }
.tab.active .i { color: var(--accent); }

.panel-body { position: relative; flex: 1; min-height: 0; }

/* Ayırıcı */
.splitter {
  position: relative; flex: 0 0 12px; cursor: col-resize;
}
.splitter::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 4px; height: 44px; border-radius: 4px;
  transform: translate(-50%, -50%);
  background: var(--line-strong); transition: background 0.15s, height 0.15s;
}
.splitter:hover::before, .splitter.dragging::before { background: var(--accent); height: 72px; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing .panel-body { pointer-events: none; }

/* ---------- Blok Editörü (Blockly) ---------- */
#blocklyDiv { position: absolute; inset: 0; }

.editor-error {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 24px; color: var(--muted); font-size: 13px; line-height: 1.6;
}
.editor-error strong { color: var(--brand); display: block; font-size: 15px; margin-bottom: 4px; }

.blocklyToolboxDiv {
  background: var(--toolbox-bg) !important;
  border-right: 1px solid var(--line);
  padding: 8px 0 !important;
}
.blocklyTreeRow {
  height: 34px !important; line-height: 34px !important;
  margin: 2px 8px !important; padding-right: 12px !important;
  border-radius: 8px; border-left-width: 6px !important;
  transition: background 0.12s;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover { background: rgba(148, 163, 184, 0.08) !important; }
.blocklyTreeSelected { background: var(--accent-soft) !important; }
.blocklyTreeLabel {
  font-family: var(--font) !important; font-size: 12.5px !important;
  font-weight: 600 !important; color: var(--text-2) !important;
}
.blocklyTreeSelected .blocklyTreeLabel { color: var(--text-strong) !important; }
.blocklyTreeSeparator { border-bottom: 1px solid var(--line) !important; margin: 6px 14px !important; height: 0 !important; }
/* Kod menülerini daralt / genişlet (app.js → setupToolboxToggle): menünün en üstündeki başlık satırı */
.tb-toggle {
  display: flex; align-items: center; gap: 6px;
  width: calc(100% - 16px); height: 28px; margin: 0 8px 4px; padding: 0 6px 0 12px;
  border: 0; border-radius: 8px; background: transparent; color: var(--dim);
  font: 700 10.5px var(--font); letter-spacing: 0.6px; text-transform: uppercase;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.tb-toggle .i { width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; transition: transform 0.2s; }
.tb-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.tb-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Daraltılmış menü: her kategori renkli nokta + kısa ad, alt alta ortalı */
.toolbox-collapsed .tb-toggle { width: calc(100% - 12px); margin: 0 6px 4px; padding: 0; justify-content: center; }
.toolbox-collapsed .tb-toggle .tb-title { display: none; }
.toolbox-collapsed .tb-toggle .i { margin: 0; transform: scaleX(-1); }
.toolbox-collapsed .blocklyTreeRow {
  width: 56px; height: auto !important; line-height: 1.2 !important;
  margin: 2px 6px !important; padding: 6px 0 5px !important;
  border-left-width: 0 !important;
}
.toolbox-collapsed .blocklyTreeRowContentContainer {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.toolbox-collapsed .blocklyTreeIcon {
  visibility: visible !important; display: block !important;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cat, var(--muted)) !important;
}
.toolbox-collapsed .blocklyTreeLabel {
  max-width: 54px; overflow: hidden; text-overflow: ellipsis;
  font-size: 10px !important; text-align: center;
}
.toolbox-collapsed .blocklyTreeSeparator { margin: 6px 12px !important; }
.blocklyFlyoutBackground { fill: var(--flyout-bg) !important; fill-opacity: 0.97 !important; }
.blocklyMainBackground { stroke: none !important; }
/* Bileşen bloklarındaki pin etiketi (blocks.js → PIN_LABEL); yazı tipi değişmez, Blockly genişliği ona göre ölçer */
.blocklyText.kod-pin { fill: #fde047 !important; }
.blocklyText.kod-pin-warn { fill: #fff !important; fill-opacity: 0.72; }
/* Blok alanı kaydırma çubukları: ince, yuvarlak, yarı saydam; üzerine gelince turkuaz */
.blocklyScrollbarBackground { fill: transparent !important; }
.blocklyScrollbarHandle {
  fill: rgba(148, 163, 184, 0.28) !important; fill-opacity: 1 !important;
  transition: fill 0.15s;
}
.blocklyScrollbarHandle:hover, .blocklyScrollbarHandle:active {
  fill: rgba(34, 211, 238, 0.65) !important;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.5));
}
.blocklyToolboxDiv { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.28) transparent; }
.blocklyToolboxDiv::-webkit-scrollbar { width: 6px; }
.blocklyToolboxDiv::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.28); border-radius: 6px; }
.blocklyToolboxDiv::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.65); }
.blocklyWidgetDiv .blocklyMenu, .blocklyDropDownDiv { font-family: var(--font) !important; }

/* ---------- RGB Renk Seçici (bloktaki renge tıklayınca) ---------- */
.blocklyDropDownContent:has(.rgb-picker) { max-height: none !important; overflow: visible !important; }
.rgb-picker {
  width: 236px; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font); color: var(--text); user-select: none;
}
.rp-sv {
  position: relative; height: 130px; border-radius: 8px; cursor: crosshair;
  touch-action: none; overflow: hidden;
}
.rp-sv-white, .rp-sv-black { position: absolute; inset: 0; pointer-events: none; }
.rp-sv-white { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.rp-sv-black { background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0)); }
.rp-sv-handle, .rp-hue-handle {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%); pointer-events: none;
}
.rp-hue {
  position: relative; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
}
.rp-hue-handle { top: 50%; }
.rp-top { display: flex; align-items: center; gap: 10px; }
.rp-preview {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--line-strong); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.rp-hex-wrap { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--muted); }
.rp-hex, .rp-num {
  height: 28px; border-radius: 7px; border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text); font-family: var(--mono); font-size: 12px;
  outline: none; text-align: center;
}
.rp-hex { width: 92px; }
.rp-hex:focus, .rp-num:focus { border-color: var(--accent); }
.rp-row { display: grid; grid-template-columns: 16px 1fr 52px; align-items: center; gap: 8px; }
.rp-ch { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.rp-ch-R { color: var(--red-text); }
.rp-ch-G { color: var(--green-text); }
.rp-ch-B { color: #60a5fa; }
.rp-range {
  -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; outline: none; cursor: pointer;
}
.rp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.rp-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.rp-num { width: 52px; -moz-appearance: textfield; }
.rp-num::-webkit-inner-spin-button { opacity: 0.5; }
.rp-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.rp-sw {
  aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer;
  transition: transform 0.1s;
}
.rp-sw:hover { transform: scale(1.18); }
.rp-note { font-size: 10.5px; color: var(--dim); text-align: center; }

/* ---------- Arduino C++ Kod Görünümü ---------- */
.code-view {
  position: absolute; inset: 0; overflow: auto; z-index: 80; /* Blockly araç kutusunun (z-index 70) üstünde */
  background: var(--code-bg);
}
.code-view pre {
  margin: 0; padding: 16px 0; min-width: max-content;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--code-text);
  counter-reset: ln;
}
.code-view .ln { display: block; padding: 0 20px 0 0; }
.code-view .ln::before {
  counter-increment: ln; content: counter(ln);
  display: inline-block; width: 46px; margin-right: 16px; padding-right: 10px;
  text-align: right; color: var(--code-ln); border-right: 1px solid var(--line);
}
.code-view .ln:hover { background: rgba(148, 163, 184, 0.05); }
/* Canlı kod paneli: yalnızca Kodlama görünümünde, açıldığında blokların sağında */
.code-panel #btnCodeSide, .code-side { display: none; }
.workbench[data-view="code"] .code-panel:not(.cpp-tab) #btnCodeSide { display: inline-flex; }
#btnCodeSide.active { color: var(--accent); border-color: rgba(34, 211, 238, 0.4); background: var(--accent-soft); }
.workbench[data-view="code"] .code-panel.side-code:not(.cpp-tab) .code-side {
  display: flex; flex-direction: column;
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--code-side-w);
  border-left: 1px solid var(--line); background: var(--code-bg);
}
.workbench[data-view="code"] .code-panel.side-code:not(.cpp-tab) #blocklyDiv { right: var(--code-side-w); }
.code-panel .panel-body { --code-side-w: clamp(300px, 40%, 640px); }
.cs-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  height: 38px; padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--line); background: var(--head-bg);
  font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap;
}
.cs-head > .i { width: 14px; height: 14px; color: var(--accent); }
.cs-live {
  margin-right: auto; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--ok-text); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3);
}
.code-side .cs-body { position: relative; inset: auto; flex: 1; min-height: 0; z-index: auto; }
.code-side .code-view pre { font-size: 12px; }
.code-side .ln { transition: background 1.2s; }
.code-side .ln.changed { background: rgba(34, 211, 238, 0.12); transition: none; }

.tok-com { color: #5f7290; font-style: italic; }
.tok-pp  { color: #f472b6; }
.tok-str { color: var(--ok-text); }
.tok-num { color: var(--warn-text); }
.tok-kw  { color: #c084fc; font-weight: 600; }
.tok-ty  { color: #22d3ee; }
.tok-fn  { color: #60a5fa; }

/* ---------- Bağlantı Alanı (Kart) ---------- */
/* overflow: alan çok kısalırsa sol alttaki düğmeler başlık menüsünün üstüne taşmasın */
.kit-body { background: var(--kit-bg); overflow: hidden; }

.board-viewport {
  position: absolute; inset: 0;
  display: flex; overflow: hidden;
  cursor: grab;
  touch-action: none; /* Dokunmatikte sürükleme sayfayı kaydırmasın */
}
.board-viewport.panning { cursor: grabbing; }
.board-viewport.panning * { cursor: grabbing !important; }
.board-viewport::-webkit-scrollbar, .code-view::-webkit-scrollbar, .log::-webkit-scrollbar { width: 10px; height: 10px; }
.board-viewport::-webkit-scrollbar-thumb, .code-view::-webkit-scrollbar-thumb, .log::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
}

#kitSvg {
  margin: auto; flex-shrink: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 22px 40px var(--board-shadow));
}

.wire-colors { display: flex; align-items: center; gap: 6px; }
.tool-label { font-size: 11.5px; color: var(--dim); font-weight: 600; margin-right: 2px; }

.color-dot {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform 0.12s;
}
.color-dot:hover { transform: scale(1.18); }
.color-dot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

/* Panel başlıkları daraldıkça kademeli sadeleşir; düğmeler asla üst üste binmez
   (yazılar gizlenir, simgeler ve üzerine gelince çıkan açıklamalar kalır) */
.panel-head .panel-title { flex: 0 1 auto; overflow: hidden; }
.panel-head .panel-title > span:not(.chip) { overflow: hidden; text-overflow: ellipsis; }
.panel-head .panel-tools { flex: 0 0 auto; }
.code-panel { container-type: inline-size; }

/* Bağlantı Alanı başlığı: kart simgesi + Kodkart etiketi | Kablo, Modüller, ses, tam ekran.
   Eşikler yakınlaştırma düğmeleri de başlıktayken ölçülmüştü (o zaman tüm yazılarla 654 px gerekiyordu);
   düğmeler sağ alta taşındığından pay bırakırlar. Her öğe sığdığı sürece görünür kalır,
   en uzun yazıdan başlayarak sadeleşir. */
@container (max-width: 665px) {
  .kit-panel #btnFullscreen .fs-label { display: none; }
}
@container (max-width: 597px) {
  .kit-panel .lbl, .kit-panel .tool-label { display: none; }
}
@container (max-width: 494px) {
  .kit-panel .panel-title .chip,
  .kit-panel .tool-sep.optional { display: none; }
  .kit-panel .panel-head { padding: 0 8px; }
  .kit-panel .panel-tools { gap: 4px; }
}
@container (max-width: 356px) {
  .kit-panel #btnSound { display: none; }
}
@container (max-width: 460px) {
  .code-panel #blockCountChip { display: none; }
}
@container (max-width: 700px) {
  .code-panel .panel-body { --code-side-w: 50%; }
}
@container (max-width: 380px) {
  .code-panel .tab { font-size: 0; gap: 0; padding: 0 9px; }
  .code-panel .tab .i { width: 16px; height: 16px; }
  .code-panel .ghost-btn { font-size: 0; gap: 0; padding: 0 8px; }
}

/* Sol alttaki denetimler (blok alanındaki yakınlaştırma düğmeleri gibi): dikey küme.
   Üstte kablo geri al / yinele, altta yakınlaştır / oran / uzaklaştır / sığdır */
.kit-controls {
  position: absolute; left: 14px; bottom: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.kc-group {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 32px; padding: 2px 0; border-radius: 16px;
  background: var(--float-bg); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.kc-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.kc-btn .i { width: 15px; height: 15px; }
.kc-btn:hover:not(:disabled), .kc-btn:focus-visible { color: var(--accent); background: var(--panel-3); outline: none; }
.kc-btn:disabled { opacity: 0.35; cursor: default; }
.kit-controls .zoom-label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; line-height: 1;
  color: var(--muted); padding: 2px 0; user-select: none;
}
/* Alçak alanda yalnızca geri al / yinele ve + / − kalır */
@media (max-height: 560px) {
  .kit-controls .zoom-label, .kit-controls #btnZoomFit { display: none; }
}

/* Bağlantı şeması: sağ alttaki düğme + taşınabilir / boyutlandırılabilir pencere (wiremap.js) */
.wiremap-btn {
  position: absolute; right: 14px; bottom: 12px; z-index: 5;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--float-bg); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  color: var(--accent); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.wiremap-btn:hover, .wiremap-btn:focus-visible {
  border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 14px rgba(34, 211, 238, 0.2); outline: none;
}
.wiremap-btn.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.wiremap {
  position: absolute; z-index: 28;
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: var(--pop-bg); border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(34, 211, 238, 0.12);
  backdrop-filter: blur(8px);
}
.wiremap.dragging { user-select: none; }
.wm-head {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line);
  cursor: grab; touch-action: none;
}
.wiremap.dragging .wm-head { cursor: grabbing; }
.wm-head:hover .sp-grip { opacity: 0.9; }
.wm-head > .i { width: 15px; height: 15px; color: var(--accent); }
.wm-name { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.wm-count {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
/* Şema pencereye göre ölçeklenir; sığmadığında ortalanmış hâlde kaydırılır (kaydırma çubuğu yeri sabit: ölçek titremesin) */
.wm-body { flex: 1; min-height: 0; overflow: auto; display: flex; scrollbar-gutter: stable; }
.wm-body::-webkit-scrollbar { width: 10px; height: 10px; }
.wm-body::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.wm-resize {
  position: absolute; bottom: 0; width: 20px; height: 20px;
  touch-action: none; opacity: 0.55;
}
.wm-resize.se {
  right: 0; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--muted) 50%, var(--muted) 56%, transparent 56%,
    transparent 68%, var(--muted) 68%, var(--muted) 74%, transparent 74%);
}
.wm-resize.sw {
  left: 0; cursor: nesw-resize;
  background: linear-gradient(225deg, transparent 50%, var(--muted) 50%, var(--muted) 56%, transparent 56%,
    transparent 68%, var(--muted) 68%, var(--muted) 74%, transparent 74%);
}
.wm-resize:hover, .wiremap.dragging .wm-resize { opacity: 1; }
.wm-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.45;
}
.wm-empty .i { width: 26px; height: 26px; color: var(--accent); opacity: 0.7; }
.wm-empty b { color: var(--text); font-size: 13px; }

.wm-svg { display: block; flex-shrink: 0; margin: auto; font-family: var(--font); }
.wm-col { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; fill: var(--muted); }
.wm-uno { fill: rgba(0, 135, 143, 0.16); stroke: rgba(0, 135, 143, 0.55); stroke-width: 1; }
.wm-node { cursor: pointer; }
.wm-node rect { fill: var(--panel-3); stroke: var(--line-strong); stroke-width: 1; transition: stroke 0.12s; }
.wm-node.mid rect { fill: #1a2438; }
.wm-node.ard rect { fill: #0d3f47; stroke: rgba(34, 211, 238, 0.35); }
.wm-node:hover rect { stroke: var(--accent); }
.wm-group { font-size: 9.5px; font-weight: 600; fill: var(--muted); }
.wm-label { font-size: 12px; font-weight: 700; fill: var(--text); }
.wm-pin { font-family: var(--mono); font-size: 12.5px; font-weight: 700; fill: #e6fbff; }
.wm-note { font-size: 9.5px; font-weight: 700; fill: #67e8f9; opacity: 0.8; }
.wm-via { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--brand); }
.wm-link { cursor: pointer; transition: opacity 0.12s; }
.wm-hit { fill: none; stroke: transparent; stroke-width: 12; }
.wm-halo { fill: none; stroke: rgba(0, 0, 0, 0.55); stroke-width: 5.6; stroke-linecap: round; }
.wm-halo.light { stroke: rgba(226, 232, 240, 0.45); }
.wm-line { fill: none; stroke-width: 2.8; stroke-linecap: round; }
.wm-end { stroke: rgba(0, 0, 0, 0.6); stroke-width: 1; }
.wm-svg.focus .wm-link:not(.hot) { opacity: 0.22; }
.wm-link.hot .wm-line { stroke-width: 3.6; }
.wm-link.selected .wm-halo { stroke: var(--accent); stroke-width: 7; opacity: 0.55; }
/* Şemada üzerine gelinen kablo kartta da parlar */
.wire.wm-hl .wire-path { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--brand)); }

/* Kablo sırası (wireanim.js): Bağlantı Alanı'nın göründüğü her görünümde; şema düğmesinin solunda */
.wireanim-btn {
  position: absolute; right: 54px; bottom: 12px; z-index: 5;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--float-bg); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  color: var(--brand); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.wireanim-btn:hover, .wireanim-btn:focus-visible {
  border-color: rgba(250, 204, 21, 0.5); box-shadow: 0 0 14px rgba(250, 204, 21, 0.2); outline: none;
}
.wireanim-btn.active { color: #1a1300; background: var(--brand-fill); border-color: var(--brand-fill); }
/* Gösterim sırasında gerçek kablolar ve kablo rehberi gizlenir; kopyaları çizilir */
.kit-body.wa-on #wiresLayer { opacity: 0; pointer-events: none; }
.kit-body.wa-on .wire-guide { display: none; }

/* Kontrol paneli: sarı kartın üzerinde de seçilsin diye opak koyu zemin, sarı çerçeve ve dışında koyu halka */
.wa-bar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px); padding: 8px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #172238 0%, #0a1020 100%);
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 4px rgba(3, 6, 12, 0.8), 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 28px rgba(250, 204, 21, 0.3);
}
.wa-bar[hidden] { display: none; }
.wa-step {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
  background: var(--brand); color: #1a1300;
  font-family: var(--mono); font-size: 15px; font-weight: 800; white-space: nowrap;
}
.wa-info {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 6px 14px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
}
.wa-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); }
.wa-end { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wa-end small, .wa-end b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-end small { font-size: 11.5px; font-weight: 600; color: #9fb0c9; }
.wa-end b { font-size: 16px; font-weight: 800; color: #fff; }
.wa-arrow { width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); stroke-width: 2.6; }
.wa-empty { font-size: 14px; font-weight: 600; color: #c3cee0; }
.wa-nav {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  height: 40px; min-width: 40px; padding: 0 8px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: #1e2a42; color: var(--text);
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; justify-content: center;
}
.wa-nav .i { width: 20px; height: 20px; }
.wa-nav:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.wa-nav:disabled { opacity: 0.35; cursor: default; }
.wa-next { padding: 0 8px 0 14px; color: #1a1300; background: var(--brand-fill); border-color: var(--brand-fill); }
.wa-next:hover:not(:disabled) { color: #1a1300; filter: brightness(1.08); }
.wa-bar .sp-close { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; font-size: 22px; color: #c3cee0; }
@container (max-width: 600px) {
  .wa-next .lbl, .wa-end small { display: none; }
  .wa-next { padding: 0 8px; }
  .wa-bar { gap: 6px; padding: 6px 8px; }
  .wa-info { gap: 8px; padding: 6px 10px; }
}

.wa-wire .wire-path { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); }
.wa-wire.done { opacity: 0.5; }
.wa-wire.current .wire-path { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--brand)); }
.wa-tip { stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px #fff); }
.wa-ring { fill: none; stroke: var(--brand); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.wa-ring.from { animation: wa-pulse 1.3s ease-out infinite; }
.wa-ring.to { opacity: 0; }
.wa-ring.to.on { stroke: #4ade80; animation: wa-pulse 1.3s ease-out infinite; }
@keyframes wa-pulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-ring.from, .wa-ring.to.on { animation: none; opacity: 1; }
}

/* Kart üzerindeki etkileşimli öğeler */
.pin-socket { cursor: crosshair; transition: all 0.12s; }
.pin-socket:hover, .pin-socket.snap-target { stroke: #38bdf8 !important; stroke-width: 2px !important; }
.pin-socket.selected-pin { fill: #22c55e !important; stroke: #ffffff !important; stroke-width: 2px !important; }
.interactive-part { cursor: pointer; }
.interactive-part.live-locked { cursor: not-allowed; } /* Canlı mod: gerçek Kodkart'tan yönetilir */
/* Klavye odağı: parçanın çevresinde parlama (fareyle tıklayınca görünmez; sensör hover / seçim parlamasını da geçer) */
.interactive-part:focus { outline: none; }
#kitSvg .interactive-part:focus-visible {
  filter: drop-shadow(0 0 1.5px var(--accent)) drop-shadow(0 0 1.5px var(--accent)) drop-shadow(0 0 7px var(--accent));
}
/* Kablolar: görünmez geniş tıklama alanı (ekranda her zaman 16 px), seçim parlaması */
.wire-hit {
  fill: none; stroke: transparent; stroke-width: 16px;
  vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer;
}
.wire-path { pointer-events: none; transition: filter 0.12s; }
.wire:hover .wire-path { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.75)); }
.wire.selected .wire-path { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #22d3ee); }
.wire.selected .wire-cap { stroke: #22d3ee; stroke-width: 2px; }
.wire-handle {
  fill: #0c1322; stroke: #22d3ee; cursor: grab; touch-action: none;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.8));
  transition: fill 0.12s;
}
.wire-handle:hover { fill: #22d3ee; }
.wire-handle.dragging { fill: #22d3ee; cursor: grabbing; }
/* Kablo uç tutamaçları: dolu turkuaz, beyaz çerçeve; sürükleyerek uç başka pine taşınır */
.wire-handle.wire-end { fill: #22d3ee; stroke: #ffffff; cursor: move; }
.wire-handle.wire-end:hover { fill: #67e8f9; }
.wire-handle.wire-end.dragging { fill: #facc15; stroke: #ffffff; cursor: grabbing; }
/* "+" tutamacı: parçanın ortasında soluk; sürükleyince yeni bükülme noktası olur */
.wire-handle.wire-ghost { opacity: 0.55; filter: none; cursor: copy; }
.wire-handle.wire-ghost:hover { opacity: 1; fill: #22d3ee; }

/* Kablo rengi / çizgi tipi açılır menüsü */
.wire-picker { position: relative; }
.wire-btn { gap: 7px; }
.wire-btn.has-selection { color: var(--accent); border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 12px rgba(34, 211, 238, 0.2); }
.wire-preview { width: 28px; height: 10px; flex-shrink: 0; }
.chev-sm { width: 12px !important; height: 12px !important; opacity: 0.7; }
.wire-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 232px;
  padding: 12px; border-radius: 12px;
  background: var(--pop-bg); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.wm-title { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.wm-section { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--dim); margin: 8px 0 6px; }
.wm-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.wm-colors .color-dot { width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.12); }
.wm-colors .color-dot.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.wm-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wm-style {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 4px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: border-color 0.12s, background 0.12s;
}
.wm-style svg { width: 44px; height: 10px; }
.wm-style span { font-size: 11px; font-weight: 600; color: var(--muted); }
.wm-style:hover { border-color: var(--line-strong); }
.wm-style.active { border-color: var(--accent); background: var(--accent-soft); }
.wm-style.active span { color: var(--text); }
.wm-selected-tools {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.wm-selected-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wm-selected-actions .ghost-btn { justify-content: center; gap: 5px; min-width: 0; padding: 0 8px; }
.wm-selected-actions .ghost-btn:disabled { opacity: 0.45; cursor: default; }
/* Sensör ekleme menüsü */
/* Modüller düğmesi başlığın sağında: menü sağ kenara hizalanır, panelin dışına taşıp kırpılmaz */
.sensor-menu { width: 310px; left: auto; right: 0; }
.sm-search {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; margin-bottom: 10px;
  border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--dim);
  transition: border-color 0.15s, color 0.15s;
}
.sm-search .i { width: 14px; height: 14px; }
.sm-search:focus-within { border-color: var(--accent); color: var(--accent); }
.sm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12.5px; color: var(--text); }
.sm-search input::placeholder { color: var(--dim); }
.sm-empty { padding: 18px 8px; text-align: center; font-size: 12px; color: var(--muted); }
.sm-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: min(430px, calc(100vh - 260px)); overflow-y: auto; padding-right: 2px;
  max-height: min(430px, calc(var(--app-h, 100dvh) - 260px));
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.sm-group {
  margin: 4px 2px 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--dim);
}
.sm-group:first-child { margin-top: 0; }
.sm-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
}
.sm-row.has-info { grid-template-columns: auto 1fr auto auto; }
.sm-row .sm-info { margin-right: -4px; color: var(--dim); }
.sm-row .sm-info:hover { color: var(--accent); }
.sm-row.on { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.06); }
.sm-row.soon { opacity: 0.55; }
.sm-icon {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft);
}
.sm-row.on .sm-icon { color: var(--green-text); background: rgba(34, 197, 94, 0.12); }
.sm-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.sm-desc { font-size: 11px; color: var(--dim); margin-top: 1px; }
.sm-row.on .sm-desc { color: var(--ok-text); }
.sm-btn { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.sm-soon {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  color: var(--muted); border: 1px solid var(--line-strong);
}
.sm-note { margin-top: 10px; font-size: 11px; line-height: 1.45; color: var(--dim); }

/* Karta takılan sensör modülü: kendi soketine doğru aynı süre ve mesafeyle kayarak oturur.
   DHT11 soketin sağından, ultrasonik solundan gelir (soketleri kartta o yöne bakar). */
.sensor-module { transition: transform 0.35s ease, opacity 0.35s ease; }
.sensor-module.out { transform: translate(0, 60px); opacity: 0; pointer-events: none; }
.sensor-module.from-left.out { transform: translate(0, -60px); }

.wm-clear {
  width: 100%; justify-content: center; margin-top: 12px;
  color: var(--danger-text); border-color: rgba(239, 68, 68, 0.3);
}
.wm-clear:hover { color: var(--danger-text-2); border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.1); }
.ghost-btn.danger { color: var(--danger-text); border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); }
.ghost-btn.danger:hover { background: rgba(239, 68, 68, 0.16); color: var(--danger-text-2); }

/* ---------- Tam ekran (akıllı tahta): üst çubuk kalır, altında yalnızca Bağlantı Alanı ekranı kaplar ----------
   Çalıştır / Durdur üst çubukta göründüğü için başlıktaki kopyaları (.fs-run) gösterilmez. */
.fs-run { display: none; align-items: center; gap: 6px; }
.fs-exit { display: none; }
.app.kit-fullscreen { grid-template-rows: 58px 1fr; }
.app.kit-fullscreen .code-panel,
.app.kit-fullscreen .splitter,
.app.kit-fullscreen .console,
.app.kit-fullscreen .statusbar { display: none !important; }
.app.kit-fullscreen .workbench { padding: 0; }
.app.kit-fullscreen .kit-panel { display: flex !important; border-radius: 0; border: 0; }
.app.kit-fullscreen .fs-enter { display: none; }
.app.kit-fullscreen .fs-exit { display: block; }
.app.kit-fullscreen .fs-btn { color: var(--accent); border-color: rgba(34, 211, 238, 0.45); }
/* Tahtada dokunarak kullanım için başlık biraz daha büyük */
.app.kit-fullscreen .kit-panel .panel-head { height: 56px; padding: 0 14px; }
.app.kit-fullscreen .kit-panel .panel-title { font-size: 15px; }

/* ---------- Gizle (akıllı tahtada gösterim): kodlar ve kablolar öğrencilerden ayrı ayrı saklanır ----------
   Kod paneli başlığındaki #btnHideCode → .app.hide-code; Bağlantı Alanı başlığındaki #btnHideWires → .app.hide-wires
   (app.js → setHidden). Kart ve etkileşimli parçalar çalışır. */
.hide-btn[aria-pressed="true"],
.hide-btn[aria-pressed="true"]:hover { color: #1a1300; background: var(--brand-fill); border-color: var(--brand-fill); }
.hide-veil {
  position: absolute; inset: 0; z-index: 90; /* Blockly araç kutusunun ve canlı kod panelinin üstünde */
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px; text-align: center;
  background: var(--panel-grad), var(--panel); color: var(--muted); /* --panel altta: koyu temada gradyan yarı saydam */
}
.hide-veil .i { width: 44px; height: 44px; color: var(--warn-text); margin-bottom: 4px; }
.hide-veil strong { font-size: 20px; font-weight: 700; color: var(--text); }
.hide-veil span { font-size: 14px; max-width: 340px; line-height: 1.5; }
.app.hide-code .hide-veil { display: flex; }
/* Kod başlığında yalnızca Gizle düğmesi kalır (blok sayısı, geri al, Canlı Kod, .ino İndir gizlenir) */
.app.hide-code .code-panel .panel-tools > :not(#btnHideCode),
.app.hide-code #sbBlocks,
.app.hide-wires :is(#wiresLayer, #tempWire, #wirePicker, .wiremap-btn, .wireanim-btn, .wiremap, .wa-bar, #sbWires),
.app.hide-wires .kit-controls .kc-group:has(#btnWireUndo) { display: none !important; }

/* Bağlantı rehberi: uygun pinler yanıp söner */
.hint-halo {
  fill: rgba(34, 197, 94, 0.2); stroke: #22c55e;
  animation: hintPulse 0.9s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.pin-socket.hint-target { animation: hintSocket 0.9s ease-in-out infinite; }
@keyframes hintSocket { 50% { fill: #22c55e; stroke: #bbf7d0; } }
/* Joystick kılavuzu: sürüklerken basılan noktada çıkar. Kare alan = tam sapma (JOY_TRAVEL_PX = 72 px),
   turkuaz nokta = anlık konum. Değerler joystick etiketinde yazar. Tıklamaları engellemez. */
.joy-pad {
  position: absolute; z-index: 25; width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease;
}
.joy-pad.show { opacity: 1; }
.jp-area {
  position: absolute; left: -72px; top: -72px; width: 144px; height: 144px; border-radius: 18px;
  background: rgba(8, 13, 26, 0.28); border: 1.5px dashed rgba(34, 211, 238, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 0 24px rgba(34, 211, 238, 0.1);
}
.jp-h, .jp-v { position: absolute; background: rgba(34, 211, 238, 0.25); }
.jp-h { left: 8px; right: 8px; top: 50%; height: 1px; }
.jp-v { top: 8px; bottom: 8px; left: 50%; width: 1px; }
.jp-center {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; border: 1.5px solid rgba(34, 211, 238, 0.6);
}
.jp-knob {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #22d3ee; border: 2px solid #ecfeff;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.85);
}
.jp-hint {
  position: absolute; left: 50%; top: -98px; transform: translateX(-50%); white-space: nowrap;
  padding: 2px 8px; border-radius: 6px; background: var(--float-bg);
  font-size: 10.5px; font-weight: 600; color: var(--muted);
}

.wire-guide {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  max-width: calc(100% - 32px); padding: 7px 14px; border-radius: 999px;
  background: var(--float-bg); border: 1px solid rgba(34, 197, 94, 0.55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(34, 197, 94, 0.2);
  font-size: 12.5px; font-weight: 600; color: var(--ok-text); text-align: center;
  pointer-events: none;
}
.tooltip.warn { border-color: #ef4444; color: var(--danger-text-2); }

.tooltip {
  position: fixed; z-index: 100; display: none; pointer-events: none;
  padding: 5px 10px; border-radius: 7px;
  background: var(--pop-bg); border: 1px solid var(--brand);
  color: var(--text); font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Simülasyon: buzzer titreşimi, tıklanabilir sensör modülleri */
.buzzing {
  animation: buzz 0.09s linear infinite;
  filter: drop-shadow(0 0 10px #facc15) !important;
  transform-box: fill-box; transform-origin: center;
}
@keyframes buzz {
  0% { transform: translate(0.6px, 0); }
  50% { transform: translate(-0.6px, 0.4px); }
  100% { transform: translate(0.6px, 0); }
}
.sensor-part:hover { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7)); }

/* Sensör değer paneli */
.sensor-pop {
  position: absolute; z-index: 30; width: 250px;
  padding: 12px 14px 10px; border-radius: 12px;
  background: var(--pop-bg); border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(34, 211, 238, 0.12);
  backdrop-filter: blur(8px);
}
/* Modüle bakan ok: panel modülün solundaysa sağ kenarda, altındaysa üst kenarda vb.
   --arrow: okun kenar boyunca konumu (modülün ortası) */
.sensor-pop[data-side]::before {
  content: ''; position: absolute; width: 12px; height: 12px;
  background: var(--pop-solid); border: 1px solid rgba(34, 211, 238, 0.35);
  transform: rotate(45deg);
}
.sensor-pop[data-side="left"]::before { right: -7px; top: calc(var(--arrow) - 6px); border-left: 0; border-bottom: 0; }
.sensor-pop[data-side="right"]::before { left: -7px; top: calc(var(--arrow) - 6px); border-right: 0; border-top: 0; }
.sensor-pop[data-side="bottom"]::before { top: -7px; left: calc(var(--arrow) - 6px); border-right: 0; border-bottom: 0; }
.sensor-pop[data-side="top"]::before { bottom: -7px; left: calc(var(--arrow) - 6px); border-left: 0; border-top: 0; }
.sp-head {
  position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  cursor: grab; touch-action: none;
}
.sp-head.dragging { cursor: grabbing; }
/* Sürükleme tutamacı (2 x 3 nokta) */
.sp-grip {
  width: 8px; height: 12px; flex-shrink: 0; opacity: 0.55;
  background: radial-gradient(circle, var(--muted) 1.1px, transparent 1.3px) 0 0 / 4px 4px;
}
.sp-head:hover .sp-grip { opacity: 0.9; }
.sp-title { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--accent); }
/* Değer paneli açık olan modül vurgulanır */
.sensor-part.sp-active { filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.95)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.5)); }
.sp-close {
  width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.sp-close:hover { background: var(--panel-3); color: var(--text); }
.sp-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center;
  padding: 6px 0; font-size: 12px; color: var(--muted);
}
.sp-row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); cursor: pointer; }
.sp-row.toggle { grid-template-columns: auto 1fr auto; cursor: pointer; }
.sp-row.toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.sp-value { font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 600; }
.sp-hint { margin-top: 6px; font-size: 11px; color: var(--dim); line-height: 1.4; }
.sp-action { width: 100%; justify-content: center; margin: 4px 0 2px; height: 32px; }
.sp-action.pulse { color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px rgba(34, 211, 238, 0.5); }
/* Canlı mod: değerler gerçek Kodkart'tan gelir, denetimler pasif */
.sensor-pop.sp-live .sp-title::after {
  content: 'CANLI'; margin-left: 8px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  font-size: 9.5px; letter-spacing: 0.08em; color: #04131a; background: #22c55e;
}
.sensor-pop.sp-live :is(input, .sp-seg button, .sp-action, .sp-presets button):disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.sensor-pop.sp-live .sp-seg button.active:disabled { opacity: 0.85; }
.sensor-pop.sp-live .sp-row { cursor: default; }
.sensor-pop.sp-live .sp-hint { color: var(--ok-text); }
.sensor-pop.sp-live .sp-hint.warn { color: var(--warn-text); }

/* ---- DHT11 canlı görseli: termometre + nem damlası ----
   --temp / --hum: değere göre renk (sim.js → rampColor). .ready eklenince değişiklikler canlanır. */
.dht-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 6px; }
.dv-card {
  display: flex; flex-direction: column; align-items: center; padding: 8px 6px 7px;
  border-radius: 10px; background: rgba(148, 163, 184, 0.06); border: 1px solid var(--line);
}
.dv-svg { width: 62px; height: 104px; overflow: visible; }
.dv-read { margin-top: 2px; display: flex; align-items: baseline; gap: 2px; font-family: var(--mono); }
.dv-read b { font-size: 20px; font-weight: 700; color: var(--text); transition: color 0.35s; }
.dv-read span { font-size: 11px; color: var(--muted); }
.dv-state { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.dht-vis .dv-card:first-child .dv-state { color: var(--temp); }
.dht-vis .dv-card:last-child .dv-state { color: var(--hum); }

/* Termometre */
.dv-tube { fill: #0b1220; stroke: rgba(148, 163, 184, 0.45); stroke-width: 1.4; }
.dv-ticks line { stroke: rgba(148, 163, 184, 0.55); stroke-width: 1; }
.dv-ticks text { fill: var(--dim); font-size: 6.5px; font-family: var(--mono); }
.dv-merc {
  fill: var(--temp); transform-box: fill-box; transform-origin: 50% 100%;
}
.dv-bulb { fill: var(--temp); }
.dv-bulb-ring { fill: #0b1220; stroke: rgba(148, 163, 184, 0.45); stroke-width: 1.4; }
.dv-shine { fill: #ffffff; opacity: 0.18; }
.dht-vis.ready .dv-merc { transition: transform 0.45s cubic-bezier(.3, 1.4, .5, 1), fill 0.35s; }
.dht-vis.ready .dv-bulb { transition: fill 0.35s; }
/* Çok sıcak: hazne nabız gibi parlar; soğuk: hafif buz parıltısı */
.dht-vis.hot .dv-bulb { animation: dvHot 1.2s ease-in-out infinite; }
.dht-vis.cold .dv-bulb { filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.9)); }
@keyframes dvHot {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.6)); }
  50% { filter: drop-shadow(0 0 9px rgba(239, 68, 68, 1)); }
}

/* Nem damlası */
.dv-drop-bg { fill: #0b1220; }
.dv-drop-line { fill: none; stroke: rgba(148, 163, 184, 0.5); stroke-width: 1.4; }
.dv-drop-shine { fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; opacity: 0.35; }
.dv-water { transform-box: view-box; }
.dht-vis.ready .dv-water { transition: transform 0.6s cubic-bezier(.3, 1.3, .5, 1); }
.dv-wave { fill: var(--hum); animation: dvWave 2.6s linear infinite; transition: fill 0.35s; }
.dv-wave2 { fill: var(--hum); opacity: 0.45; animation-duration: 3.8s; animation-direction: reverse; }
@keyframes dvWave { from { transform: translateX(0); } to { transform: translateX(60px); } }
.dv-bubble { fill: #ffffff; opacity: 0; animation: dvBubble 2.4s ease-in infinite; }
.dv-bubble.b2 { animation-delay: 0.8s; }
.dv-bubble.b3 { animation-delay: 1.6s; }
@keyframes dvBubble {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translateY(-16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-wave, .dv-bubble, .dht-vis.hot .dv-bulb { animation: none; }
}

/* ---- LDR canlı görseli: gündüz / gece sahnesi (.day = aydınlık) ---- */
.ldr-vis { margin: 2px 0 8px; }
.lv-svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.lv-night { opacity: 1; transition: opacity 0.7s ease; }
.ldr-vis.day .lv-night { opacity: 0; }
.lv-stars circle { fill: #ffffff; animation: lvTwinkle 2.2s ease-in-out infinite; }
.lv-stars { opacity: 1; transition: opacity 0.6s; }
.ldr-vis.day .lv-stars { opacity: 0; }
@keyframes lvTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
/* Güneş batar, ay doğar */
.lv-sun { transform: translateY(70px); opacity: 0; }
.ldr-vis.day .lv-sun { transform: none; opacity: 1; }
.lv-moon { fill: #e2e8f0; transform: none; opacity: 1; filter: drop-shadow(0 0 6px rgba(226, 232, 240, 0.55)); }
.ldr-vis.day .lv-moon { transform: translateY(70px); opacity: 0; }
.ldr-vis.ready .lv-sun, .ldr-vis.ready .lv-moon { transition: transform 0.8s cubic-bezier(.4, 0, .2, 1), opacity 0.8s; }
.lv-sun-core { fill: #fde047; filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.9)); }
.lv-rays line { stroke: #fde047; stroke-width: 2.4; stroke-linecap: round; }
.lv-rays { animation: lvSpin 14s linear infinite; }
@keyframes lvSpin { to { transform: rotate(360deg); } }
/* Fotodirence akan ışık hüzmeleri */
.lv-beams path {
  stroke: #fef9c3; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 7; fill: none;
  opacity: 0; animation: lvBeam 0.9s linear infinite;
}
.ldr-vis.day .lv-beams path { opacity: 0.85; }
.ldr-vis.ready .lv-beams path { transition: opacity 0.6s; }
@keyframes lvBeam { to { stroke-dashoffset: -12; } }
.lv-ground { fill: #14532d; opacity: 0.9; transition: fill 0.7s; }
.ldr-vis.day .lv-ground { fill: #22c55e; }
/* Fotodirenç: aydınlıkta parlar; LED (D0) aydınlıkta yeşil yanar */
.lv-ldr { fill: #e7c9a0; stroke: #a16207; stroke-width: 1.2; }
.lv-track { fill: none; stroke: #9a3412; stroke-width: 1.5; stroke-linecap: round; }
.lv-leg { stroke: #cbd5e1; stroke-width: 2; }
.lv-ldr-halo { fill: #fde047; opacity: 0; transition: opacity 0.6s; filter: blur(3px); }
.ldr-vis.day .lv-ldr-halo { opacity: 0.75; }
.lv-led { fill: #14532d; stroke: #052e16; stroke-width: 1; transition: fill 0.3s; }
.ldr-vis.day .lv-led { fill: #4ade80; filter: drop-shadow(0 0 5px #22c55e); }
.lv-led-label { fill: #e2e8f0; font-size: 7px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }
.lv-info { display: grid; gap: 4px; margin-top: 8px; }
.lv-info div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.lv-k { color: var(--muted); }
.lv-info b { font-family: var(--mono); font-size: 12px; color: var(--text); }
.lv-state { color: #a5b4fc !important; }
.ldr-vis.day .lv-state { color: #fde047 !important; }
.lv-out { color: var(--muted) !important; }
.ldr-vis.day .lv-out { color: var(--green-text) !important; }
@media (prefers-reduced-motion: reduce) {
  .lv-stars circle, .lv-rays, .lv-beams path { animation: none; }
}

/* ---- Ses sensörü canlı görseli (.active = ses algılandı, .clap = yeni alkış) ---- */
.snd-vis { margin: 2px 0 8px; }
.sv-svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.sv-bg { fill: #0b1220; }
.sv-base { stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; }
.sv-bar {
  fill: #22d3ee; transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.08s linear, fill 0.15s;
}
.sv-bar.hot { fill: #f97316; }
.snd-vis.active .sv-bar.hot { fill: #ef4444; filter: drop-shadow(0 0 3px rgba(239, 68, 68, 0.8)); }
.sv-threshold { stroke: #f59e0b; stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.85; }
.sv-th-label { fill: #f59e0b; font-size: 7px; font-weight: 700; font-family: var(--mono); text-anchor: end; }
/* Mikrofondan yayılan dalgalar: yalnızca ses varken */
.sv-arc { fill: none; stroke: #22d3ee; stroke-width: 2; stroke-linecap: round; opacity: 0.12; }
.snd-vis.active .sv-arc { animation: svArc 0.7s ease-out infinite; }
@keyframes svArc { 0% { opacity: 0.9; } 100% { opacity: 0.12; } }
/* Alkış: mikrofondan genişleyen halkalar */
.sv-ripples circle { fill: none; stroke: #fde047; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.snd-vis.clap .sv-ripples circle { animation: svRipple 0.75s ease-out; }
.snd-vis.clap .sv-ripples circle:nth-child(2) { animation-delay: 0.12s; }
.snd-vis.clap .sv-ripples circle:nth-child(3) { animation-delay: 0.24s; }
@keyframes svRipple { 0% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(3.2); opacity: 0; } }
.sv-led { fill: #3f1d1d; stroke: #1f0b0b; stroke-width: 1; transition: fill 0.1s; }
.snd-vis.active .sv-led { fill: #f87171; filter: drop-shadow(0 0 5px #ef4444); }
.sv-led-label { fill: #e2e8f0; font-size: 7px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }
.sv-info { display: grid; gap: 4px; margin-top: 8px; }
.sv-info div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.sv-k { color: var(--muted); }
.sv-info b { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.snd-vis.active .sv-info b { color: var(--green-text); }
@media (prefers-reduced-motion: reduce) {
  .snd-vis.active .sv-arc, .snd-vis.clap .sv-ripples circle { animation: none; }
}

/* ---- Sıvı seviye canlı görseli: beher + daldırılmış sensör (.wet = sıvı algılandı) ---- */
.wtr-vis { margin: 2px 0 6px; }
.wv-svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.wv-bg { fill: #0b1220; }
.wv-glass { fill: rgba(148, 163, 184, 0.07); stroke: rgba(226, 232, 240, 0.55); stroke-width: 1.6; }
.wv-ticks line { stroke: rgba(226, 232, 240, 0.45); stroke-width: 1; }
.wv-ticks text { fill: var(--dim); font-size: 6.5px; font-family: var(--mono); text-anchor: end; }
.wv-water { transform-box: view-box; }
.wtr-vis.ready .wv-water { transition: transform 0.55s cubic-bezier(.3, 1.25, .5, 1); }
.wtr-vis.empty .wv-water { opacity: 0; }
.wv-wave { fill: #38bdf8; opacity: 0.75; animation: dvWave 2.4s linear infinite; }
.wv-wave2 { fill: #2563eb; opacity: 0.45; animation-duration: 3.6s; animation-direction: reverse; }
.wv-bubble { fill: #ffffff; opacity: 0; animation: dvBubble 2.6s ease-in infinite; }
.wv-bubble.b2 { animation-delay: 0.9s; }
.wv-bubble.b3 { animation-delay: 1.7s; }
/* Sensör kartı: kırmızı PCB, paralel metal izler; ıslakken izlerden akım akar */
.wv-pcb { fill: #b91c1c; stroke: #7f1d1d; stroke-width: 1; }
.wv-pwr { fill: #f87171; filter: drop-shadow(0 0 3px #ef4444); }
.wv-traces line { stroke: #e5e7eb; stroke-width: 1.8; stroke-linecap: round; }
.wv-current line {
  stroke: #67e8f9; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 3 6;
  opacity: 0; transition: opacity 0.3s;
}
.wtr-vis.wet .wv-current line { opacity: 1; animation: wvCurrent 0.6s linear infinite; filter: drop-shadow(0 0 2px #22d3ee); }
@keyframes wvCurrent { to { stroke-dashoffset: -9; } }
.wv-touch { stroke: #f59e0b; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.9; }
.wv-touch-label { fill: #f59e0b; font-size: 6.5px; font-weight: 700; font-family: var(--mono); }
/* Dijital çıkış göstergesi */
.wv-out-bg { fill: rgba(148, 163, 184, 0.06); stroke: var(--line-strong); stroke-width: 1; transition: fill 0.3s, stroke 0.3s; }
.wtr-vis.wet .wv-out-bg { fill: rgba(34, 197, 94, 0.12); stroke: rgba(74, 222, 128, 0.55); }
.wv-out-k { fill: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-anchor: middle; }
.wv-out-v { fill: #94a3b8; font-size: 36px; font-weight: 700; font-family: var(--mono); text-anchor: middle; transition: fill 0.3s; }
.wv-out-t { fill: #94a3b8; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; text-anchor: middle; font-family: var(--mono); }
.wtr-vis.wet .wv-out-v, .wtr-vis.wet .wv-out-t { fill: #4ade80; }
.wtr-vis.wet .wv-out-v { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.7)); }
.wv-info { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 12px; }
.wv-k { color: var(--muted); }
.wv-state { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; white-space: nowrap; }
.wtr-vis.wet .wv-state { color: var(--green-text); }
@media (prefers-reduced-motion: reduce) {
  .wv-wave, .wv-bubble, .wtr-vis.wet .wv-current line { animation: none; }
}

/* ---- Toprak nem canlı görseli: saksıda bitki + sensör (--soil, --plant: değere göre renk; .dry = D0 1) ---- */
.soil-vis { margin: 2px 0 6px; }
.sl-svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.sl-bg { fill: #0b1220; }
.sl-stem { fill: none; stroke: var(--plant); stroke-width: 3; stroke-linecap: round; }
.sl-leaf { fill: var(--plant); stroke: rgba(0, 0, 0, 0.25); stroke-width: 0.6; }
.sl-plant { transform-box: view-box; transform-origin: 50px 66px; }
.sl-leaf-l { transform-box: view-box; transform-origin: 50px 50px; }
.sl-leaf-r { transform-box: view-box; transform-origin: 50px 38px; }
.sl-leaf-t { transform-box: view-box; transform-origin: 50px 26px; }
.soil-vis.ready .sl-plant, .soil-vis.ready .sl-leaf-l, .soil-vis.ready .sl-leaf-r, .soil-vis.ready .sl-leaf-t {
  transition: transform 0.6s cubic-bezier(.3, 1.3, .5, 1);
}
.soil-vis.ready .sl-stem, .soil-vis.ready .sl-leaf, .soil-vis.ready .sl-soil { transition: fill 0.4s, stroke 0.4s; }
.sl-pot { fill: #c2410c; }
.sl-rim { fill: #ea580c; }
.sl-soil { fill: var(--soil); }
.sl-cracks path { fill: none; stroke: #5b3a1a; stroke-width: 0.9; stroke-linecap: round; }
.sl-drops circle { fill: #7dd3fc; }
.soil-vis.ready .sl-cracks, .soil-vis.ready .sl-drops { transition: opacity 0.4s; }
.sl-prong { fill: #c9a227; stroke: #8a6d12; stroke-width: 0.6; }
.sl-probe { fill: #1e40af; stroke: #172554; stroke-width: 0.8; }
.sl-pled { fill: #ef4444; filter: drop-shadow(0 0 2px #ef4444); }
.sl-k { fill: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 0.8px; text-anchor: middle; }
.sl-a0 { fill: var(--text); font-size: 20px; font-weight: 700; font-family: var(--mono); text-anchor: middle; }
.sl-bar-bg { fill: rgba(148, 163, 184, 0.15); }
.sl-bar { fill: var(--soil); stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; transform-box: fill-box; transform-origin: 0 50%; }
.soil-vis.ready .sl-bar { transition: transform 0.3s ease, fill 0.4s; }
.sl-th { stroke: #f59e0b; stroke-width: 1.4; stroke-dasharray: 2 1.5; }
.sl-th-label { fill: #f59e0b; font-size: 6px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }
.sl-d0-bg { fill: rgba(34, 197, 94, 0.12); stroke: rgba(74, 222, 128, 0.5); stroke-width: 1; transition: fill 0.3s, stroke 0.3s; }
.sl-d0 { fill: #4ade80; font-size: 8.5px; font-weight: 700; text-anchor: middle; font-family: var(--mono); transition: fill 0.3s; }
.soil-vis.dry .sl-d0-bg { fill: rgba(245, 158, 11, 0.14); stroke: rgba(245, 158, 11, 0.6); }
.soil-vis.dry .sl-d0 { fill: #fbbf24; }
.sl-info { display: grid; gap: 4px; margin-top: 8px; }
.sl-info div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.sl-k2 { color: var(--muted); }
.sl-info b { font-family: var(--mono); font-size: 12px; color: var(--green-text); }
.soil-vis.dry .sl-info b { color: var(--warn-text); }
/* Kaydırıcı: ıslak (mavi / koyu toprak) → kuru (kum rengi); uçlarda anlamı */
.sp-row.soil input[type="range"] { background: linear-gradient(90deg, #2563eb, #2a1709 22%, #6b4423 55%, #c9a66b); }
.sp-ends {
  grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -2px;
  font-size: 10.5px; color: var(--dim);
}

/* ---- Ultrasonik canlı görseli (data-zone: near < 10 cm, mid < 30 cm, far) ---- */
.us-vis { margin: 2px 0 6px; --zone: #22c55e; }
.us-vis[data-zone="near"] { --zone: #ef4444; }
.us-vis[data-zone="mid"] { --zone: #f59e0b; }
.us-svg { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }
.us-bg { fill: #0b1220; }
.us-floor { stroke: rgba(148, 163, 184, 0.3); stroke-width: 1; }
.us-mesh { stroke: #334155; stroke-width: 1.6; stroke-dasharray: 1.5 1.5; }
.us-tr { fill: var(--muted); font-size: 6.5px; font-weight: 700; text-anchor: middle; font-family: var(--mono); }
.us-out { fill: none; stroke: #22d3ee; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.8)); }
.us-echo { fill: none; stroke: #f59e0b; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.8)); }
.us-obstacle { transform-box: view-box; }
.us-vis.ready .us-obstacle { transition: transform 0.35s cubic-bezier(.3, 1.2, .5, 1); }
.us-face { fill: var(--zone); filter: drop-shadow(0 0 4px var(--zone)); transition: fill 0.3s; }
.us-dim { stroke: var(--zone); stroke-width: 1.4; stroke-dasharray: 3 2; transition: stroke 0.3s; }
.us-dim-label { fill: var(--zone); font-size: 8px; font-weight: 700; text-anchor: middle; font-family: var(--mono); transition: fill 0.3s; }
.us-ticks line { stroke: rgba(148, 163, 184, 0.5); stroke-width: 1; }
.us-ticks text { fill: var(--dim); font-size: 5.8px; text-anchor: middle; font-family: var(--mono); }
.us-info { display: grid; gap: 4px; margin-top: 8px; }
.us-info div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.us-k { color: var(--muted); }
.us-info b { font-family: var(--mono); font-size: 12px; color: var(--text); }
.us-state { color: var(--zone) !important; }
/* Mesafe kaydırıcısı: karekök ölçek; 10 cm ≈ %14, 30 cm ≈ %26,5 */
.sp-row.dist input[type="range"] {
  background: linear-gradient(90deg, #ef4444 0 14%, #f59e0b 14% 26.5%, #22c55e 26.5%);
}
/* Hazır değer düğmeleri */
.sp-presets { grid-column: 1 / -1; display: flex; gap: 4px; margin-top: 2px; }
.sp-presets button {
  flex: 1; height: 24px; padding: 0 2px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel-2);
  color: var(--muted); font-size: 11px; font-weight: 700; font-family: var(--mono); white-space: nowrap;
}
.sp-presets button:hover { color: var(--text); border-color: rgba(34, 211, 238, 0.5); }

/* Seçmeli düğme (ör. Aydınlık / Karanlık) */
.sp-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin: 2px 0 4px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line);
}
.sp-seg button {
  height: 30px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 12.5px; font-weight: 700; transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.sp-seg button:hover { color: var(--text); }
.sp-seg button.active { background: var(--panel-3); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35); }

/* Renk geçişli kaydırıcılar (DHT11): iz konuya uygun renkte, topuz değerin rengini alır (--thumb) */
.sp-row.temp input[type="range"], .sp-row.hum input[type="range"], .sp-row.soil input[type="range"], .sp-row.dist input[type="range"],
.sp-row.water input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; margin: 6px 0 4px; border-radius: 999px; outline: none;
}
.sp-row.temp input[type="range"] { background: linear-gradient(90deg, #38bdf8, #22c55e 36%, #f59e0b 60%, #ef4444); }
.sp-row.hum input[type="range"] { background: linear-gradient(90deg, #fcd34d, #38bdf8 43%, #2563eb); }
/* Su seviyesi: algılama seviyesine (%30) kadar gri, sonrası mavi */
.sp-row.water input[type="range"] { background: linear-gradient(90deg, #475569 0 30%, #38bdf8 30%, #2563eb); }
.sp-row.temp input[type="range"]::-webkit-slider-thumb, .sp-row.hum input[type="range"]::-webkit-slider-thumb,
.sp-row.water input[type="range"]::-webkit-slider-thumb, .sp-row.soil input[type="range"]::-webkit-slider-thumb,
.sp-row.dist input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff; border: 3px solid var(--thumb, var(--accent)); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  cursor: pointer; transition: transform 0.12s;
}
.sp-row.temp input[type="range"]::-moz-range-thumb, .sp-row.hum input[type="range"]::-moz-range-thumb,
.sp-row.water input[type="range"]::-moz-range-thumb, .sp-row.soil input[type="range"]::-moz-range-thumb,
.sp-row.dist input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ffffff; border: 3px solid var(--thumb, var(--accent)); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); cursor: pointer;
}
.sp-row.temp input[type="range"]:active::-webkit-slider-thumb, .sp-row.hum input[type="range"]:active::-webkit-slider-thumb,
.sp-row.water input[type="range"]:active::-webkit-slider-thumb, .sp-row.soil input[type="range"]:active::-webkit-slider-thumb,
.sp-row.dist input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }

.icon-btn.sm.off { color: var(--danger); }

/* ---------- Konsol (Seri Monitör / Çıktı) ---------- */
.console {
  position: relative;
  display: flex; flex-direction: column;
  margin: 12px 12px 10px;
  height: var(--console-h, 190px);
  background: var(--console-grad);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: height 0.2s ease;
}
.console.collapsed { height: 42px; }
/* Üst kenardaki tutamaç sürüklenerek konsol yüksekliği değiştirilir (app.js → --console-h) */
.console-resizer {
  position: absolute; top: 0; left: 0; right: 0; height: 7px; z-index: 2;
  cursor: row-resize; touch-action: none;
}
.console-resizer::before {
  content: ''; position: absolute; top: 2px; left: 50%;
  width: 44px; height: 3px; border-radius: 3px; transform: translateX(-50%);
  background: transparent; transition: background 0.15s, width 0.15s;
}
.console-resizer:hover::before, .console-resizer.dragging::before { background: var(--accent); width: 72px; }
.console.collapsed .console-resizer { display: none; }
.console.sizing { transition: none; }
body.resizing.row { cursor: row-resize; }
#btnConsoleFullscreen .fs-exit { display: none; }

/* Konsol tam ekranı: üst çubuk kalır, altında yalnızca konsol (Seri Monitör / Seri Çizici / Çıktı) */
.app.console-fullscreen { grid-template-rows: 58px 1fr; }
.app.console-fullscreen .workbench,
.app.console-fullscreen .statusbar,
.app.console-fullscreen .console-resizer,
.app.console-fullscreen #btnConsoleToggle { display: none !important; }
.app.console-fullscreen .console { height: auto; margin: 0; border: 0; border-radius: 0; transition: none; }
.app.console-fullscreen #btnConsoleFullscreen { color: var(--accent); border-color: rgba(34, 211, 238, 0.45); }
.app.console-fullscreen #btnConsoleFullscreen .fs-enter { display: none; }
.app.console-fullscreen #btnConsoleFullscreen .fs-exit { display: block; }
.app.console-fullscreen .log { font-size: 14px; }
.console-head { height: 40px; border-bottom: 1px solid var(--line); }
.console.collapsed .console-head { border-bottom-color: transparent; }
.console.collapsed .chev { transform: rotate(180deg); }
.chev { transition: transform 0.2s; }

.console-body { position: relative; flex: 1; min-height: 0; }
.console-pane { position: absolute; inset: 0; display: flex; flex-direction: column; }
.console-pane[hidden] { display: none; }

.log {
  flex: 1; overflow: auto; padding: 8px 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--log-text);
}
.log .line { display: flex; gap: 12px; white-space: pre-wrap; }
.log .ts { color: var(--dim); flex-shrink: 0; }
.log .info { color: var(--accent); }
.log .ok { color: var(--green-text); }
.log .warn { color: var(--brand); }
.log .err { color: var(--red-text); }
.log .sent { color: #c084fc; }
.log .muted { color: var(--dim); }

.serial-input {
  display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line);
}
.serial-input input {
  flex: 1; height: 30px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-family: var(--mono); font-size: 12px; outline: none;
}
.serial-input input:focus { border-color: var(--accent); }

/* Seri Çizici: solda grafik, sağda Duraklat + çizgi anahtarları (dar konsolda anahtarlar üstte) */
.console { container-type: inline-size; }
.console-pane.plotter { flex-direction: row; }
.plot-area { position: relative; flex: 1; min-width: 0; }
.plot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plot-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center; font-size: 12px; line-height: 1.7; color: var(--dim); pointer-events: none;
}
.plot-empty b { color: var(--muted); }
.plot-empty code { font-family: var(--mono); color: var(--accent); }
.plot-side {
  display: flex; flex-direction: column; gap: 6px; width: 180px; flex-shrink: 0;
  padding: 8px 10px 8px 0; min-height: 0;
}
.plot-pause { justify-content: center; height: 26px; flex-shrink: 0; }
.plot-pause .pp-play, .plot-pause.active .pp-pause { display: none; }
.plot-pause.active .pp-play { display: block; }
.plot-pause.active { color: var(--brand); border-color: rgba(250, 204, 21, 0.3); background: var(--brand-soft); }
.plot-legend { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.plot-key {
  display: flex; align-items: center; gap: 7px; min-height: 20px; padding: 0 6px; border-radius: 6px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font-size: 11.5px; color: var(--text);
}
.plot-key:hover { background: var(--panel-3); }
.plot-key i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.plot-key .pk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plot-key .pk-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--c); }
.plot-key.off { color: var(--dim); }
.plot-key.off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
.plot-key.off .pk-val { color: var(--dim); }

@container (max-width: 560px) {
  .console .tab { font-size: 0; gap: 0; padding: 0 9px; }
  .console .tab .i { width: 16px; height: 16px; }
  .console-pane.plotter { flex-direction: column-reverse; }
  .plot-side { flex-direction: row; width: auto; padding: 6px 10px 0; align-items: center; }
  .plot-legend { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .plot-key { flex-shrink: 0; }
}

.select {
  height: 28px; padding: 0 8px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: 12px; outline: none; cursor: pointer;
}

/* ---------- Durum Çubuğu ---------- */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--statusbar-bg); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.sb-left, .sb-right { display: flex; align-items: center; gap: 18px; }
.sb-item { display: inline-flex; align-items: center; gap: 7px; }

/* Hakkında / Lisanslar penceresi */
.modal.about-modal { width: min(640px, 100%); display: flex; flex-direction: column; gap: 12px; max-height: min(86vh, 760px); }
.about-scroll { overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.about-modal h2 { font-size: 18px; font-weight: 800; color: var(--text); }
.about-modal h2 span { font-size: 12px; font-weight: 700; color: var(--accent); margin-left: 4px; }
.about-modal h3 {
  margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--dim);
}
.about-modal p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-bottom: 6px; }
.about-modal p b { color: var(--text); }
.about-lead { margin-top: 4px; }
.about-copy { color: var(--text) !important; }
.about-modal a { color: var(--accent); text-decoration: none; }
.about-modal a:hover { text-decoration: underline; }
.about-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.about-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.about-table th { text-align: left; font-weight: 700; color: var(--dim); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.about-table td { padding: 5px 6px; color: var(--muted); border-bottom: 1px solid var(--line); vertical-align: top; }
.about-table td:first-child { color: var(--text); }
#sbState { color: var(--ok-text); }
.app.is-running #sbState { color: var(--accent); }
.app.is-running #sbState .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ---------- Modern diyalog penceresi ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 20px;
  background: var(--backdrop); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.15s;
}
.modal-backdrop.show { opacity: 1; }
.modal {
  width: min(420px, 100%);
  display: grid; grid-template-columns: auto 1fr; gap: 14px 16px;
  padding: 20px; border-radius: 16px;
  background: var(--modal-grad);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(34, 211, 238, 0.06);
  transform: translateY(8px) scale(0.98); transition: transform 0.15s;
}
.modal-backdrop.show .modal { transform: none; }
.modal-icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(34, 211, 238, 0.25);
}
.modal-icon .i { width: 20px; height: 20px; }
.modal.danger .modal-icon { color: var(--red-text); background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }
.modal-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; }
.modal-message { font-size: 13px; line-height: 1.5; color: var(--muted); }
.modal-message:empty { display: none; }
.modal-input {
  margin-top: 6px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  font-size: 14px; font-weight: 600; outline: none;
}
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.modal-btn { height: 36px; padding: 0 16px; font-size: 13px; }
.modal-ok {
  border: 1px solid rgba(34, 211, 238, 0.6); color: #04131a;
  background: linear-gradient(180deg, #22d3ee, #06b6d4);
  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.25);
}
.modal-ok:hover { filter: brightness(1.08); }
.modal-ok-danger {
  border: 1px solid rgba(239, 68, 68, 0.6); color: #fff;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25);
}
.modal-ok-danger:hover { filter: brightness(1.08); }

/* Telefon uyarısı (app.js → phoneNotice): dar ekranda düğmeler satırı paylaşır, sığmazsa alt alta; dokunmaya uygun yükseklik */
.phone-notice .modal-actions { flex-wrap: wrap; }
.phone-notice .modal-btn { flex: 1 1 auto; justify-content: center; height: 44px; font-size: 14px; }

/* Bildirim */
.toast {
  position: fixed; left: 50%; bottom: 52px; z-index: 200;
  transform: translate(-50%, 12px); opacity: 0;
  padding: 9px 16px; border-radius: 10px;
  background: var(--pop-bg); border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Hazır Projeler ---------- */
.projects-page, .learn-page, .tasks-page { --lvl-1: #22c55e; --lvl-2: #facc15; --lvl-3: #fb7185; }
.pp-scroll {
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  padding: 26px clamp(16px, 3vw, 40px) 32px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.pp-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pp-title { font-size: 22px; font-weight: 800; letter-spacing: 0.2px; }
.pp-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.pp-search {
  display: flex; align-items: center; gap: 8px;
  width: min(280px, 100%); height: 38px; padding: 0 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--dim);
  transition: border-color 0.15s;
}
.pp-search:focus-within { border-color: var(--accent); color: var(--accent); }
.pp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--text); }

.pp-filters {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--head-bg); border: 1px solid var(--line);
}
.pp-filter-row { display: flex; align-items: baseline; gap: 12px; }
.pp-filter-label {
  flex: 0 0 74px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--dim);
}
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 6px 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel-2);
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.pp-chip:hover:not(:disabled) { color: var(--text); border-color: rgba(148, 163, 184, 0.4); }
.pp-chip:disabled { opacity: 0.35; cursor: default; }
.pp-chip-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: rgba(148, 163, 184, 0.12); font-size: 11px; color: var(--dim);
}
.pp-chip.active { color: var(--accent); border-color: rgba(34, 211, 238, 0.55); background: var(--accent-soft); }
.pp-chip.active .pp-chip-n { background: rgba(34, 211, 238, 0.2); color: var(--accent); }
.pp-chip.sensor.active { color: var(--violet-text); border-color: rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.12); }
.pp-chip.sensor.active .pp-chip-n { background: rgba(167, 139, 250, 0.22); color: var(--violet-text); }
.pp-chip.lvl-baslangic.active { --c: var(--lvl-1); }
.pp-chip.lvl-orta.active { --c: var(--lvl-2); }
.pp-chip.lvl-ileri.active { --c: var(--lvl-3); }
.pp-chip[class*="lvl-"].active {
  color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.pp-chip[class*="lvl-"].active .pp-chip-n { color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); }

.pp-result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px; margin: 18px 0 12px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}

.pp-result-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.pp-mode { font-size: 11.5px; font-weight: 500; color: var(--dim); }

.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.pp-card {
  --c: var(--lvl-1);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 16px; border-radius: 14px; overflow: hidden;
  background: var(--card-grad);
  border: 1px solid var(--line);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pp-card.lvl-orta { --c: var(--lvl-2); }
.pp-card.lvl-ileri { --c: var(--lvl-3); }
.pp-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c), transparent);
}
.pp-card:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
.pp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pp-level {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--c);
}
.pp-level.lvl-baslangic { --c: var(--lvl-1); }
.pp-level.lvl-orta { --c: var(--lvl-2); }
.pp-level.lvl-ileri { --c: var(--lvl-3); }
.pp-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.pp-bars i { width: 3px; border-radius: 1px; background: rgba(148, 163, 184, 0.25); }
.pp-bars i:nth-child(1) { height: 5px; }
.pp-bars i:nth-child(2) { height: 8px; }
.pp-bars i:nth-child(3) { height: 12px; }
.pp-bars i.on { background: var(--c); }
.pp-meta { font-size: 11.5px; color: var(--dim); font-weight: 600; }
.pp-card h3 { font-size: 16px; font-weight: 700; color: var(--text); }
.pp-card p { font-size: 13px; line-height: 1.5; color: var(--muted); flex: 1; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-tag {
  padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: rgba(148, 163, 184, 0.1); color: var(--muted); border: 1px solid var(--line);
}
.pp-tag.sensor { background: rgba(167, 139, 250, 0.1); color: var(--violet-text); border-color: rgba(167, 139, 250, 0.3); }
.pp-tag.hit { background: var(--accent-soft); color: var(--accent); border-color: rgba(34, 211, 238, 0.55); }
.pp-tag.sensor.hit { background: rgba(167, 139, 250, 0.22); color: var(--violet-text-2); border-color: rgba(167, 139, 250, 0.75); }
.pp-open {
  justify-content: center; margin-top: 4px;
  border: 1px solid rgba(34, 211, 238, 0.4); background: var(--accent-soft); color: var(--accent);
}
.pp-open:hover { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.7); }

.pp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 50px 20px; text-align: center; color: var(--muted); font-size: 13px;
}
.pp-empty .i { width: 34px; height: 34px; color: var(--dim); margin-bottom: 6px; }
.pp-empty strong { color: var(--text); font-size: 15px; }

@media (max-width: 640px) {
  .pp-filter-row { flex-direction: column; gap: 6px; }
  .pp-filter-label { flex: none; }
}

/* ---------- Öğren (app.js → "Öğren", içerik learn.js): bilgi kartı sayfası ----------
   Grup renkleri: kavram mavi, parça turuncu, sensör mor (Projeler'deki sensör etiketleriyle aynı ton) */

.learn-page { --g-kavram: #38bdf8; --g-parca: #fb923c; --g-sensor: #a78bfa; }
.ln-g-kavram { --g: var(--g-kavram); }
.ln-g-parca { --g: var(--g-parca); }
.ln-g-sensor { --g: var(--g-sensor); }

/* Öğren ile Projeler'in farkı: listenin üstünde tek satırlık açıklama */
.ln-diff {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 16px;
  padding: 10px 12px 10px 14px; border-radius: 12px; font-size: 12.5px; color: var(--muted);
  background: var(--head-bg); border: 1px solid var(--line);
}
.ln-diff-item b { color: var(--text); }
.ln-diff-item:first-child b { color: var(--accent); }
.ln-diff-item:nth-child(2) b { color: var(--brand); }
.ln-diff .ghost-btn { margin-left: auto; }

.ln-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pp-chip[class*="ln-g-"].active {
  color: var(--g); border-color: color-mix(in srgb, var(--g) 55%, transparent);
  background: color-mix(in srgb, var(--g) 12%, transparent);
}
.pp-chip[class*="ln-g-"].active .pp-chip-n { color: var(--g); background: color-mix(in srgb, var(--g) 20%, transparent); }

.ln-group { margin-top: 20px; }
.ln-group-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted);
}
.ln-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ln-card {
  display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 14px 12px 14px 14px;
  border-radius: 14px; text-align: left; cursor: pointer; color: inherit; font: inherit;
  background: var(--card-grad); border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--g) 70%, transparent);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ln-card:hover {
  transform: translateY(-2px); border-color: color-mix(in srgb, var(--g) 45%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.ln-card:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; }
.ln-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent);
}
.ln-icon .i { width: 20px; height: 20px; }
.ln-icon.lg { width: 56px; height: 56px; border-radius: 15px; }
.ln-icon.lg .i { width: 28px; height: 28px; }
.ln-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ln-card-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.ln-card-short { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ln-card-go { color: var(--dim); display: grid; transition: color 0.15s, transform 0.15s; }
.ln-card:hover .ln-card-go { color: var(--g); transform: translateX(2px); }

/* Konu sayfası */
.ln-topic { max-width: 1120px; margin: 0 auto; }
.ln-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ln-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ln-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; color: var(--g); }
.ln-title { margin-top: 2px; font-size: 24px; font-weight: 800; color: var(--text); }
.ln-lead { margin-top: 4px; font-size: 14px; color: var(--muted); max-width: 760px; }

.ln-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ln-sec {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px 18px 18px; border-radius: 14px;
  background: var(--card-grad); border: 1px solid var(--line);
}
.ln-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.ln-num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--g); background: color-mix(in srgb, var(--g) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 40%, transparent);
}
.ln-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.ln-text b, .ln-points b, .ln-note b, .ln-life b, .ln-block-note b { color: var(--text); }
.ln-life {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
  background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.25);
}
.ln-life .i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--brand); }
.ln-life b { color: var(--brand); }
.ln-note {
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--g) 50%, transparent);
}
.ln-hint { font-size: 12px; color: var(--dim); }
.ln-points { display: flex; flex-direction: column; gap: 8px; padding-left: 0; list-style: none; }
.ln-points li {
  position: relative; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.ln-points li::before {
  content: ''; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 2px;
  background: var(--g); opacity: 0.8;
}

/* Bağlantı listesi: parça ucu ── Arduino pini (renk pin türünü gösterir) */
.ln-wires { display: flex; flex-direction: column; gap: 8px; }
.ln-wires-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.25fr);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--dim);
}
.ln-wires-head span:last-child { grid-column: 3; }
.ln-wire {
  --k: var(--accent);
  display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.25fr); align-items: center;
}
.ln-wire.k-analog { --k: #4ade80; }
.ln-wire.k-pwm { --k: #c084fc; }
.ln-wire.k-guc { --k: #f87171; }
.ln-wire.k-sda, .ln-wire.k-scl { --k: #fbbf24; }
.ln-end {
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ln-line { height: 3px; border-radius: 2px; background: var(--k); box-shadow: 0 0 8px color-mix(in srgb, var(--k) 50%, transparent); }
.ln-pin-box { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ln-pin {
  flex: 0 0 auto; min-width: 44px; padding: 6px 8px; border-radius: 8px; text-align: center;
  font: 700 13px var(--mono); color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, transparent); border: 1px solid color-mix(in srgb, var(--k) 50%, transparent);
}
.ln-pin-box small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* Örnek bloklar: salt okunur Blockly alanı */
.ln-blocks {
  border-radius: 10px; overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--line); background: var(--code-bg);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ln-blocks-ws { position: relative; height: 90px; }
.ln-blocks .blocklySvg { background: transparent; }
.ln-blocks .blocklyMainBackground { stroke: none; }
.ln-block-note { margin-top: -4px; font-size: 12px; color: var(--muted); }
.ln-v-label {
  margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--dim);
}
.ln-values { display: flex; flex-direction: column; gap: 12px; margin-top: -4px; }
.ln-v-title { font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }

/* Aralık çubuğu: en küçükten en büyüğe renk geçişi, varsa orta değer işareti */
.ln-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g) 18%, transparent), var(--g));
}
.ln-mid { position: absolute; top: -4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.ln-mid i { width: 3px; height: 18px; border-radius: 2px; background: var(--text); opacity: 0.75; }
.ln-mid em { margin-top: 2px; font: 600 10.5px var(--mono); font-style: normal; color: var(--muted); }
.ln-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.ln-ends span { display: flex; flex-direction: column; gap: 1px; }
.ln-ends span:last-child { text-align: right; align-items: flex-end; }
.ln-ends b { font: 700 13px var(--mono); color: var(--text); }
.ln-ends small { font-size: 11.5px; color: var(--muted); }
.ln-v-range:has(.ln-mid) .ln-ends { margin-top: 20px; }

.ln-bool { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ln-bool > span {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--panel-2);
}
.ln-bool b { font-size: 13px; }
.ln-bool small { font-size: 12px; color: var(--muted); }
.ln-b-yes { border-color: rgba(34, 197, 94, 0.45) !important; background: rgba(34, 197, 94, 0.08) !important; }
.ln-b-yes b { color: var(--green-text); }
.ln-b-no b { color: var(--text-2); }

.ln-lcd {
  display: inline-flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 6px;
  background: #3f6212; border: 3px solid #1f2937; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}
.ln-lcd-row { display: grid; grid-template-columns: repeat(16, 15px); gap: 2px; }
.ln-lcd-row span {
  height: 21px; display: grid; place-items: center; border-radius: 1px;
  font: 700 14px var(--mono); color: #ecfccb; background: rgba(236, 252, 203, 0.07);
}
.ln-lcd-cap { display: flex; justify-content: space-between; max-width: 290px; margin-top: 4px; font-size: 11px; color: var(--dim); }

/* Şemalar */
.ln-diagram { width: 100%; max-width: 420px; height: auto; align-self: center; overflow: visible; }
.ln-diagram text { font-family: var(--font); }
.dg-title { font-size: 11px; font-weight: 700; fill: var(--text); }
.dg-axis { font-size: 10px; font-weight: 600; fill: var(--muted); font-family: var(--mono) !important; }
.dg-note { font-size: 10px; fill: var(--muted); }
.dg-base { stroke: var(--line-strong); stroke-width: 1; }
.dg-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dg-a { stroke: var(--accent); }
.dg-b { stroke: #4ade80; }
.dg-led { fill: #f87171; }
.dg-led-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-board { fill: #e7e2d4; stroke: #c9c2ae; }
.dg-gap { fill: #cfc8b4; }
.dg-hole { fill: #475569; }
.dg-strip { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.dg-rail-plus { fill: rgba(239, 68, 68, 0.35); stroke: #ef4444; }
.dg-rail-minus { fill: rgba(59, 130, 246, 0.3); stroke: #3b82f6; }
.ln-diagram[aria-label^="Breadboard"] .dg-axis { fill: #57534e; }
.dg-start { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: var(--accent); }
.dg-flow { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.dg-arrow { fill: var(--muted); }
.dg-box { stroke-width: 1.5; }
.dg-once { fill: color-mix(in srgb, #e59400 16%, transparent); stroke: #e59400; }
.dg-loop { fill: color-mix(in srgb, #e59400 16%, transparent); stroke: #e59400; stroke-dasharray: 5 3; }
.dg-box-t { font-size: 11px; font-weight: 700; fill: var(--text); }
.dg-box-s { font-size: 10px; fill: var(--muted); }
.dg-uno { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); }
.dg-screen { fill: color-mix(in srgb, var(--text) 5%, transparent); stroke: var(--line-strong); stroke-width: 1.2; }
.dg-input { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.dg-mono { font-size: 10px; fill: var(--text); font-family: var(--mono) !important; }
.dg-mono-s { font-size: 8px; }
.dg-grid { stroke: var(--line-strong); stroke-width: 0.8; stroke-dasharray: 2 3; }
.dg-c1 { fill: var(--accent); }
.dg-c2 { fill: #4ade80; }
.dg-sw1 { fill: var(--accent); }
.dg-sw2 { fill: #4ade80; }
.dg-dark { fill: #0b1220; }
.dg-rgb-t { font-size: 13px; font-weight: 800; fill: #e2e8f0; }
.dg-rgb-s { font-size: 10.5px; font-weight: 600; fill: #cbd5e1; }

/* İlgili projeler: tek tıkla açılır */
.ln-projects { display: flex; flex-direction: column; gap: 6px; }
.ln-proj {
  --c: var(--lvl-1);
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px; border-radius: 10px; text-align: left; cursor: pointer; font: inherit;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.ln-proj.lvl-orta { --c: var(--lvl-2); }
.ln-proj.lvl-ileri { --c: var(--lvl-3); }
.ln-proj:hover { border-color: rgba(34, 211, 238, 0.5); background: var(--accent-soft); }
.ln-proj-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-proj-go { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--accent); }
.ln-proj-go .i { width: 14px; height: 14px; }
.ln-all { align-self: flex-start; }

.ln-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.ln-page {
  display: inline-flex; align-items: center; gap: 10px; max-width: 48%; padding: 10px 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font: inherit; text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.ln-page.next { text-align: right; }
.ln-page span { display: flex; flex-direction: column; min-width: 0; }
.ln-page small { font-size: 11px; color: var(--dim); }
.ln-page b { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-page:hover { border-color: var(--line-strong); color: var(--text); }

@media (max-width: 860px) {
  .ln-sections { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ln-hero { align-items: flex-start; }
  .ln-icon.lg { width: 44px; height: 44px; }
  .ln-title { font-size: 20px; }
  .ln-wire, .ln-wires-head { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); }
  .ln-pin-box { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ln-proj { grid-template-columns: minmax(0, 1fr) auto; }
  .ln-proj .pp-level { display: none; }
  .ln-lcd-row { grid-template-columns: repeat(16, 12px); }
  .ln-lcd-row span { font-size: 11px; height: 18px; }
}

/* Üst çubuk daralma kademeleri (ölçülen genişliklere göre). Geniş ekranda sekmeler tam ortadadır;
   yer azalınca önce kenarlar sıkışır, sonra sekmeler iki grubun arasında ortalanır ve yalnızca simgeye iner. */
@media (max-width: 1560px) {
  /* Kodkart bağlantı düğmesi simge olarak kalır (her genişlikte erişilebilir) */
  .board-chip .bc-label { display: none; }
  button.board-chip { gap: 6px; padding: 0 10px; }
}
@media (max-width: 1180px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page-tabs { justify-self: center; }
}
@media (max-width: 1120px) {
  /* Kayıt durumu yalnızca nokta (ipucu ayrıntıyı söyler) */
  .save-state { font-size: 0; gap: 0; padding: 0 4px; }
}
@media (max-width: 1040px) {
  .brand-text { display: none; }
}
@media (max-width: 960px) {
  /* Sekmeler yalnızca simge (ipucu sayfanın adını söyler) */
  .page-tab { padding: 0 11px; }
  .page-tab span { display: none; }
}
@media (max-width: 860px) {
  /* Üst çubuktaki Durdur / Çalıştır yalnızca simge */
  .topbar .btn { font-size: 0; gap: 0; padding: 0 12px; }
  .topbar .btn .i { width: 16px; height: 16px; }
  .topbar { gap: 10px; padding: 0 10px; }
  .tb-left, .tb-right { gap: 8px; }
  .project input { max-width: 120px; }
}
@media (max-width: 760px) {
  .project input { max-width: 104px; }
}
@media (max-width: 700px) {
  .brand, .tb-divider { display: none; }
  .project input { max-width: 96px; }
  .page-tab { padding: 0 8px; }
  .tb-left, .tb-right { gap: 6px; }
}
@media (max-width: 640px) {
  .project input { max-width: 80px; }
  .page-tab { padding: 0 6px; }
}
@media (max-width: 600px) {
  .project input { max-width: 64px; }
  .page-tab { padding: 0 4px; }
  .topbar { gap: 6px; }
  .tb-right { gap: 4px; }
}
/* Kart bağlıyken (.board-on) Canlı | Yükle seçicisine yer açan kademeler (ölçülerek belirlendi) */
@media (max-width: 1140px) {
  /* Seçici sıkışır: yazılar kalır, Yükle'nin simgesi gizlenir */
  .board-mode button { padding: 0 8px; gap: 5px; }
  .board-mode button .i { display: none; }
}
@media (max-width: 985px) {
  /* Canlı modda Çalıştır / Yeniden Başlat da yalnızca simge */
  .app.board-on:not(.board-upload) .topbar .btn { font-size: 0; gap: 0; padding: 0 12px; }
}
@media (max-width: 800px) {
  /* Seçici yalnızca simge (renk ve ipucu modu gösterir) */
  .board-mode .lbl { display: none; }
  .board-mode button { padding: 0 9px; }
  .board-mode button .i { display: block; }
}
@media (max-width: 1720px) {
  /* Kart bağlıyken bağlantı düğmesi daha erken simgeye iner (yeşil nokta bağlı olduğunu gösterir) */
  .app.board-on .board-chip .bc-label { display: none; }
  .app.board-on button.board-chip { gap: 6px; padding: 0 10px; }
}
@media (max-width: 1520px) {
  /* Kart bağlıyken sekmeler daha erken yalnızca simgeye iner */
  .app.board-on .page-tab { padding: 0 11px; }
  .app.board-on .page-tab span { display: none; }
}
@media (max-width: 1240px) {
  /* Kart bağlıyken sekmeler daha erken iki grubun arasında ortalanır (Yükle modu en geniş durum) */
  .app.board-on .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .app.board-on .page-tabs { justify-self: center; }
}
@media (max-width: 1000px) {
  .app.board-on .project input { max-width: 110px; }
}
@media (max-width: 960px) {
  .app.board-on .brand, .app.board-on .tb-divider { display: none; }
  .app.board-on .project input { max-width: 96px; }
}
@media (max-width: 735px) {
  .app.board-on .project input { max-width: 80px; }
}
@media (max-width: 700px) {
  .app.board-on .page-tab { padding: 0 6px; }
  .app.board-on .view-switch button { width: 26px; }
}
@media (max-width: 640px) {
  .app.board-on .board-chip .dot { display: none; }
  .app.board-on .board-mode button { padding: 0 7px; }
  .app.board-on .save-state { display: none; }
  .app.board-on .project input { max-width: 64px; }
  .app.board-on .topbar { gap: 6px; }
  .app.board-on .tb-right { gap: 4px; }
}
@media (max-width: 560px) {
  .app.board-on .page-tab { padding: 0 4px; }
}
/* ---------- Rehber (tutorial.js): arayüz turu, görev paneli, ipucu halkaları ---------- */
kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--panel-2);
  font: 600 11px/17px var(--mono); color: var(--text); text-align: center;
}

/* Tur: tıklamaları tutan kalkan, vurgulanan bölüm (çevresi kararır) ve açıklama kartı */
.tour-shield { position: fixed; inset: 0; z-index: 1100; }
.tour-spot {
  position: fixed; z-index: 1101; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(2, 6, 14, 0.62);
  outline: 2px solid var(--accent); outline-offset: 0;
  opacity: 0; transition: opacity 0.2s, left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tour-spot.none { outline-color: transparent; }
.tour-spot.show { opacity: 1; }
.tour-card {
  position: fixed; z-index: 1102; width: min(340px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--modal-grad); border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.08);
  opacity: 0; transition: opacity 0.2s, left 0.3s ease, top 0.3s ease;
}
.tour-card.show, .tour-shield.show ~ .tour-card { opacity: 1; }
.tour-card.centered { width: min(400px, calc(100vw - 24px)); }
.tc-head { display: flex; align-items: center; justify-content: space-between; }
.tc-step { font: 700 11px var(--mono); color: var(--accent); letter-spacing: 0.5px; }
.tc-close {
  width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.tc-close:hover { color: var(--text); background: var(--panel-3); }
.tc-title { font-size: 16px; font-weight: 800; color: var(--text); }
.tc-text { font-size: 13px; line-height: 1.55; color: var(--muted); }
.tc-text b { color: var(--text); }
.tc-dots { display: flex; gap: 5px; margin-top: 2px; }
.tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: all 0.2s; }
.tc-dots i.past { background: rgba(34, 211, 238, 0.45); }
.tc-dots i.on { width: 18px; border-radius: 3px; background: var(--accent); }
.tc-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.tc-actions .btn, .tc-actions .ghost-btn { height: 34px; }
.tc-prev { margin-right: auto; }

/* Rehber penceresi: tur düğmesi + görev listesi */
.modal.guide-modal { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; max-height: min(88vh, 760px); overflow-y: auto; }
.gd-head { display: flex; gap: 14px; align-items: flex-start; }
.gd-badge {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.3);
}
.gd-badge .i { width: 22px; height: 22px; }
.gd-head h2 { font-size: 18px; font-weight: 800; color: var(--text); }
.gd-head p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gd-tour {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(34, 211, 238, 0.35); background: var(--accent-soft); color: var(--accent);
  transition: border-color 0.15s, background 0.15s;
}
.gd-tour:hover { border-color: var(--accent); }
.gd-tour > .i:first-child { width: 20px; height: 20px; fill: currentColor; }
.gd-tour span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gd-tour b { font-size: 14px; color: var(--text); }
.gd-tour small { font-size: 12px; color: var(--muted); }
/* Görevler sayfasına geçiş (yeşil) ve açık göreve dönüş */
.gd-tour.gd-tasks { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); color: var(--ok-text); }
.gd-tour.gd-tasks:hover { border-color: var(--ok-text); }
.gd-tour.gd-tasks > .i:first-child { fill: none; }
.gd-resume { align-self: flex-start; height: 32px; gap: 7px; }

/* Görev paneli: blok alanının sağ üstünde, başlığından sürüklenir */
.tut-panel {
  position: fixed; z-index: 150; width: min(310px, calc(100vw - 16px));
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 120px);
  max-height: calc(var(--app-h, 100dvh) - 120px);
  border-radius: 14px; background: var(--pop-bg); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(250, 204, 21, 0.08);
}
.tut-panel.dragging { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(250, 204, 21, 0.3); }
.tp-head {
  display: flex; align-items: center; gap: 9px; padding: 10px 8px 10px 12px;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.tut-panel.dragging .tp-head { cursor: grabbing; }
.tp-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft);
}
.tp-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-kicker { font: 700 10px var(--mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--dim); }
.tp-title { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-count { font: 700 11.5px var(--mono); color: var(--brand); }
.tp-btn {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.tp-btn:hover { color: var(--text); background: var(--panel-3); }
.tp-btn .i { width: 14px; height: 14px; }
.tp-progress { height: 3px; background: var(--line); }
.tp-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-fill), #22c55e); transition: width 0.4s ease; }
.tp-body { overflow-y: auto; padding: 8px 10px 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.tut-panel.min .tp-progress, .tut-panel.min .tp-body { display: none; }
.tut-panel.on-tasks { display: none; } /* Görevler sayfasında: kartlardaki "Devam et" göreve döndürür */

.tp-steps { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.tp-steps li { display: flex; gap: 10px; padding: 6px; border-radius: 10px; border: 1px solid transparent; }
.tp-num {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px var(--mono); color: var(--dim); border: 1px solid var(--line-strong);
}
.tp-num .i { width: 13px; height: 13px; stroke-width: 3; }
.tp-step { flex: 1; min-width: 0; }
.tp-step b { font-size: 12.5px; font-weight: 600; color: var(--dim); }
.tp-steps li.done .tp-num { color: #04130a; background: #22c55e; border-color: #22c55e; }
.tp-steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.tp-steps li.current { background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.28); }
.tp-steps li.current .tp-num { color: #1a1300; background: var(--brand-fill); border-color: var(--brand-fill); }
.tp-steps li.current b { color: var(--text); font-weight: 700; font-size: 13px; }
.tp-step p { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.tp-step p b { font-size: inherit; font-weight: 700; color: var(--text); }
.tp-feedback {
  padding: 6px 8px; border-radius: 8px; color: var(--warn-text) !important;
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3);
}
.tp-hint { margin-top: 8px; height: 28px; }
.tp-steps li.flash .tp-num { animation: tpFlash 0.7s ease; }
@keyframes tpFlash {
  0% { transform: scale(0.6); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  60% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: none; }
}
.tp-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 4px; text-align: center; }
.tp-trophy {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: var(--brand); background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.4);
  animation: tpFlash 0.8s ease;
}
.tp-trophy .i { width: 24px; height: 24px; }
.tp-done b { font-size: 14px; color: var(--text); }
.tp-done p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.tp-actions { display: flex; gap: 8px; margin-top: 6px; }
.tp-actions .btn { height: 32px; padding: 0 12px; font-size: 12.5px; gap: 4px; }
.tp-actions .btn .i { width: 14px; height: 14px; }
.tp-actions .ghost-btn { height: 32px; }

/* Dört sabit aşama: Modül → Kablo → Bloklar → Dene (gerekmeyen aşama soluk ve kesikli) */
.tp-phases { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px 0 10px; }
.tp-phases li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--dim); text-align: center;
}
.tp-phases li:not(:first-child)::before {
  content: ''; position: absolute; top: 11px; left: calc(-50% + 15px); right: calc(50% + 15px);
  height: 2px; border-radius: 1px; background: var(--line-strong);
}
.tp-phases li.done::before, .tp-phases li.current::before { background: #22c55e; }
.tp-phases i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px var(--mono); font-style: normal; border: 1px solid var(--line-strong); background: var(--pop-bg);
}
.tp-phases i .i { width: 13px; height: 13px; stroke-width: 3; }
.tp-phases li.done { color: var(--ok-text); }
.tp-phases li.done i { color: #04130a; background: #22c55e; border-color: #22c55e; }
.tp-phases li.current { color: var(--text); }
.tp-phases li.current i { color: #1a1300; background: var(--brand-fill); border-color: var(--brand-fill); box-shadow: 0 0 0 3px var(--brand-soft); }
.tp-phases li.skip { opacity: 0.45; }
.tp-phases li.skip i { border-style: dashed; }
.tp-phase-title {
  margin: 2px 6px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--dim);
}
.tp-phase-title b { color: var(--brand); margin-right: 4px; }
/* Hedef cümlesi (Orta ve İleri) */
.tp-goal {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-2); background: var(--accent-soft); border: 1px solid rgba(34, 211, 238, 0.28);
}
.tp-goal .i { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--accent); }
.tp-goal b { color: var(--text); }
.tp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-tools .tp-hint { margin-top: 0; }
.tp-confirm { height: 30px; padding: 0 12px; font-size: 12.5px; gap: 6px; }
.tp-confirm .i { width: 15px; height: 15px; }
/* İleri: yalnızca hedef listesi */
.tp-goals { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tp-goals li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px;
  font-size: 13px; line-height: 1.4; color: var(--text-2); border: 1px solid transparent;
}
.tp-goals li.current { background: var(--brand-soft); border-color: rgba(250, 204, 21, 0.28); color: var(--text); font-weight: 600; }
.tp-goals li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.tp-box {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; display: grid; place-items: center;
  border: 2px solid var(--line-strong);
}
.tp-box .i { width: 12px; height: 12px; stroke-width: 3.5; }
.tp-goals li.current .tp-box { border-color: var(--brand-fill); }
.tp-goals li.done .tp-box { color: #04130a; background: #22c55e; border-color: #22c55e; }
.tp-body > .tp-feedback { margin-bottom: 8px; font-size: 12.5px; line-height: 1.5; }
.tp-note { font-size: 11.5px; line-height: 1.45; color: var(--dim); padding: 0 4px; }
/* Tebrik kutusundaki serbest fikir */
.tp-extra {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  text-align: left; background: var(--accent-soft); border: 1px dashed rgba(34, 211, 238, 0.45);
}
.tp-extra-icon { flex-shrink: 0; color: var(--accent); display: grid; }
.tp-extra-icon .i { width: 18px; height: 18px; }
.tp-extra small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.tp-extra span { font-size: 12.5px; line-height: 1.45; color: var(--text); }

/* İpucu halkaları: hedefi izler, tıklamaları engellemez */
.tut-hints { position: fixed; inset: 0; z-index: 140; pointer-events: none; }
.tut-ring {
  position: fixed; border-radius: 50%;
  border: 3px solid var(--brand-fill);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 18px rgba(250, 204, 21, 0.75);
  animation: tutRing 1.1s ease-in-out infinite;
}
.tut-ring.box { border-radius: 10px; }
@keyframes tutRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-ring, .tp-trophy, .tp-steps li.flash .tp-num { animation: none; }
  .tour-spot, .tour-card { transition: opacity 0.2s; }
}

/* Projeler galerisinde görevlere giden not */
.pp-guide {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 10px 12px 10px 14px; border-radius: 12px;
  background: var(--brand-soft); border: 1px solid rgba(250, 204, 21, 0.28);
}
.pp-guide-icon { color: var(--brand); display: grid; }
.pp-guide-text { flex: 1; font-size: 13px; color: var(--muted); }
.pp-guide-text b { color: var(--text); }

/* ---------- Görevler sayfası (tutorial.js → "Görevler sayfası"): ilerleme + kademeli görev kartları ---------- */
.tk-progress {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 14px 16px; border-radius: 12px; background: var(--head-bg); border: 1px solid var(--line);
}
.tk-progress-main { flex: 1 1 320px; min-width: 0; }
.tk-progress-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.tk-done-text { font-size: 13px; color: var(--muted); }
.tk-done-text b { font: 800 18px var(--mono); color: var(--text); margin-right: 2px; }
.tk-lvl-counts { display: flex; gap: 12px; flex-wrap: wrap; font: 600 11.5px var(--mono); color: var(--dim); }
.tk-lvl-counts span { display: inline-flex; align-items: center; gap: 5px; }
.tk-lvl-counts i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tk-lvl-counts .lvl-baslangic, .tk-level.lvl-baslangic { --c: var(--lvl-1); }
.tk-lvl-counts .lvl-orta, .tk-level.lvl-orta { --c: var(--lvl-2); }
.tk-lvl-counts .lvl-ileri, .tk-level.lvl-ileri { --c: var(--lvl-3); }
.tk-bar { height: 10px; margin-top: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tk-bar i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand-fill), #22c55e); transition: width 0.5s ease; }
.tk-continue { flex-shrink: 0; max-width: 100%; height: 36px; gap: 6px; }
.tk-continue span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-continue .i { width: 15px; height: 15px; }
.tk-all-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ok-text); }
.tk-all-done .i { width: 20px; height: 20px; }

.tk-level { margin-top: 24px; }
.tk-level-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.tk-level-head .pp-level { font-size: 14px; font-weight: 800; }
.tk-level-head p { font-size: 12.5px; color: var(--muted); }
.tk-level-head p b { color: var(--text); }
.tk-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Kademedeki kartlar satırı doldurur */
.tk-num { font: 700 11px var(--mono); letter-spacing: 0.5px; text-transform: uppercase; color: var(--c); }
.tk-state { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--dim); }
.tk-state .i { width: 13px; height: 13px; stroke-width: 3; }
.tk-state.ok { color: var(--ok-text); }
.tk-state.on { color: var(--brand); }
.tk-card.done { border-color: rgba(34, 197, 94, 0.32); }
.tk-card.active { border-color: rgba(250, 204, 21, 0.45); }
/* Kartta dört aşama: görevde gerekmeyen aşama soluk */
.tk-phases { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tk-phases li {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 24px; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted); background: rgba(148, 163, 184, 0.08); border: 1px solid var(--line);
}
.tk-phases b { font: 700 10px var(--mono); color: var(--c); }
.tk-phases li.off { opacity: 0.4; border-style: dashed; text-decoration: line-through; }
.tk-go { justify-content: center; margin-top: 2px; gap: 4px; }
.tk-go .i { width: 15px; height: 15px; }

/* ---------- Açık tema: değişkenlerle karşılanmayan ayrıntılar ----------
   Renklerin çoğu en üstteki :root[data-theme="light"] değişkenleriyle değişir; burada yalnızca
   gölgeler, Blockly ızgarası, kod renkleri ve koyu zemine göre seçilmiş tek tük renkler var. */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(8, 145, 178, 0.08), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, rgba(202, 138, 4, 0.06), transparent 60%),
    linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
}
/* Gölgeler: koyu temadaki siyah gölgeler açık zeminde kirli görünür, yumuşatılır */
:root[data-theme="light"] .panel { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); }
:root[data-theme="light"] :is(.wiremap, .sensor-pop, .wire-menu) { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16); }
:root[data-theme="light"] :is(.tooltip, .toast) { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); }
:root[data-theme="light"] .modal { box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); }
:root[data-theme="light"] .wire-guide { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 0 16px rgba(34, 197, 94, 0.15); }
:root[data-theme="light"] :is(.kc-group, .wiremap-btn, .wireanim-btn) { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }
:root[data-theme="light"] .pp-card:hover {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1), 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
/* Blockly ızgarası (renk Blockly.inject'te verilir; CSS sunum özniteliğini ezer) */
:root[data-theme="light"] pattern[id^="blocklyGridPattern"] line { stroke: #d3dbe6; }
/* Arduino C++ renklendirmesi ve Seri Monitör */
:root[data-theme="light"] .tok-com { color: #64748b; }
:root[data-theme="light"] .tok-pp  { color: #be185d; }
:root[data-theme="light"] .tok-str { color: #15803d; }
:root[data-theme="light"] .tok-num { color: #b45309; }
:root[data-theme="light"] .tok-kw  { color: #7c3aed; }
:root[data-theme="light"] .tok-ty  { color: #0e7490; }
:root[data-theme="light"] .tok-fn  { color: #1d4ed8; }
:root[data-theme="light"] .log .sent { color: #7c3aed; }
/* Bağlantı şeması */
:root[data-theme="light"] .wm-node.mid rect { fill: #e2e8f0; }
:root[data-theme="light"] .wm-node.ard rect { fill: #cffafe; stroke: rgba(8, 145, 178, 0.45); }
:root[data-theme="light"] .wm-pin { fill: #164e63; }
:root[data-theme="light"] .wm-note { fill: #0e7490; }
/* Renk kutucukları beyaz zeminde kaybolmasın */
:root[data-theme="light"] :is(.rp-sw, .wm-colors .color-dot:not(.active)) { border-color: rgba(15, 23, 42, 0.15); }
/* Hazır Projeler zorluk renkleri yazı olarak da okunsun */
:root[data-theme="light"] :is(.projects-page, .learn-page, .tasks-page) { --lvl-1: #15803d; --lvl-2: #b45309; --lvl-3: #e11d48; }
/* LDR değer paneli: gece / gündüz yazısı */
:root[data-theme="light"] .lv-state { color: #4f46e5 !important; }
:root[data-theme="light"] .ldr-vis.day .lv-state { color: #a16207 !important; }
/* Rehber: tur kartı ve görev paneli */
:root[data-theme="light"] :is(.tut-panel, .tour-card) { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); }
/* Öğren: grup ve pin türü renkleri açık zeminde yazı olarak da okunsun */
:root[data-theme="light"] .learn-page { --g-kavram: #0369a1; --g-parca: #c2410c; --g-sensor: #7c3aed; }
:root[data-theme="light"] .ln-wire.k-analog { --k: #15803d; }
:root[data-theme="light"] .ln-wire.k-pwm { --k: #9333ea; }
:root[data-theme="light"] .ln-wire.k-guc { --k: #dc2626; }
:root[data-theme="light"] :is(.ln-wire.k-sda, .ln-wire.k-scl) { --k: #b45309; }
:root[data-theme="light"] .dg-b { stroke: #16a34a; }
:root[data-theme="light"] :is(.dg-c2, .dg-sw2) { fill: #16a34a; }
:root[data-theme="light"] .ln-life { border-color: rgba(161, 98, 7, 0.25); }
:root[data-theme="light"] .ln-card:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); }