/* =============================================================================
 * RoboForge - Shared theme  (rf-theme.css)  v1.0.0
 * -----------------------------------------------------------------------------
 * ONE source of truth for design tokens, base styles, shared components and the
 * standard responsive breakpoints. Linked from EVERY page BEFORE its inline
 * <style>. Page-specific inline styles still win (later in the cascade), so this
 * file is safe to add without breaking any page - and from now on, global visual
 * changes happen HERE once instead of across 32 files.
 *
 * Standard breakpoints (used across the product):
 *   --bp-sm: 560px   (phone)
 *   --bp-md: 900px   (tablet / small laptop)
 *   --bp-lg: 1200px  (desktop)
 * ========================================================================== */

:root{
  /* --- surfaces --- */
  --bg:#0b1220; --panel:#0f172a; --panel2:#111c33; --line:#1e3a5f;
  /* --- brand / accents --- */
  --sky:#38bdf8; --sky2:#0ea5e9; --green:#22c55e; --amber:#f59e0b;
  --red:#ef4444; --purple:#a855f7;
  /* RoboForge main brand color (#0066a2) + on-dark readable tint + hover glow */
  --brand:#0066a2; --brand-lt:#3aa0d8; --brand-glow:rgba(0,102,162,.45);
  /* --- text (lifted for readability - faint gray was hard to read) --- */
  --txt:#e6edf5; --muted:#8aa0bb; --muted2:#b7c6da;

  /* --- 6 theme (category) colors --- */
  --c1:#22c55e; --c1s:rgba(34,197,94,.14);   /* Temel Sürüş - yeşil */
  --c2:#38bdf8; --c2s:rgba(56,189,248,.14);  /* Görev & Strateji - mavi */
  --c3:#a855f7; --c3s:rgba(168,85,247,.16);  /* Kontrol Mühendisliği - mor */
  --c4:#f59e0b; --c4s:rgba(245,158,11,.15);  /* Fabrika & Otomasyon - amber */
  --c5:#2dd4bf; --c5s:rgba(45,212,191,.15);  /* Uzay & Telemetri - teal */
  --c6:#f472b6; --c6s:rgba(244,114,182,.15); /* Sürü & Lokomosyon - pembe */
  /* --- difficulty band colors --- */
  --d1:#4ade80; --d2:#38bdf8; --d3:#fbbf24; --d4:#f87171;

  /* --- spacing scale --- */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px;
  /* --- radii --- */
  --r-sm:8px; --r-md:11px; --r-lg:16px;
  /* --- standard breakpoints (for reference in JS / documentation) --- */
  --bp-sm:560px; --bp-md:900px; --bp-lg:1200px;
}

/* --- base --- */
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; color:var(--txt);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1100px 700px at 75% -15%,#15294a 0%,var(--bg) 55%);
}
a{color:inherit;text-decoration:none}
img,canvas,svg{max-width:100%}
.mono{font-family:'Courier New',ui-monospace,monospace}

/* --- accessibility: visible keyboard focus (was missing everywhere) --- */
:focus-visible{ outline:2px solid var(--sky); outline-offset:2px; border-radius:4px; }

/* --- hover-frame highlight for interactive components (RoboLab-style lit frame) --- */
.rf-hoverable{ transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.rf-hoverable:hover{ border-color:var(--brand-lt); box-shadow:0 0 0 1px var(--brand-lt), 0 0 16px var(--brand-glow); }
/* --- header safety: a crowded header must wrap, never overlap itself at odd zoom --- */
header{ flex-wrap:wrap; row-gap:8px; }
header .grow,header .brand{ min-width:0; }

/* --- reusable "?" info badge with rich hover tooltip (data-tip="...") --- */
.infq{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.62rem;font-weight:800;cursor:help;margin-left:5px;position:relative;vertical-align:middle}
.infq:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:135%;transform:translateX(-50%);
  width:240px;max-width:70vw;background:#0b1526;border:1px solid var(--brand-lt);border-radius:9px;padding:9px 11px;
  font-size:.68rem;font-weight:400;line-height:1.5;color:var(--txt);z-index:120;box-shadow:0 8px 26px rgba(0,0,0,.55);
  white-space:normal;text-align:left;letter-spacing:0;text-transform:none;font-weight:400}
.infq:hover::before{content:'';position:absolute;left:50%;bottom:125%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--brand-lt);z-index:121}
/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- shared button system (rf- prefixed so it never clashes with page CSS) --- */
.rf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-weight:800;font-size:.84rem;
  letter-spacing:.3px;cursor:pointer;transition:.15s;line-height:1;min-height:40px;
}
.rf-btn:hover{border-color:var(--sky)}
.rf-btn.primary{background:linear-gradient(180deg,var(--sky2),#0369a1);border-color:var(--sky);color:#eaf6ff}
.rf-btn.go{background:linear-gradient(180deg,#16a34a,#15803d);border-color:var(--green);color:#eafff0}
.rf-btn.ghost{background:transparent;color:var(--muted2)}
.rf-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* =============================================================================
 * CATALOG UX  (search/filter, "start here", welcome) - used by index.html
 * ========================================================================== */
.starthere{
  display:flex;align-items:center;gap:14px;margin:22px 0 4px;padding:16px 20px;border-radius:var(--r-lg);
  border:1px solid rgba(56,189,248,.5);background:linear-gradient(100deg,rgba(56,189,248,.14),rgba(34,197,94,.06));
  cursor:pointer;transition:.16s;
}
.starthere:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:0 12px 34px rgba(56,189,248,.18)}
.starthere .sh-ic{font-size:2rem;flex:none}
.starthere .sh-txt{flex:1}
.starthere .sh-k{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--sky)}
.starthere .sh-t{font-size:1.1rem;font-weight:800;margin:2px 0}
.starthere .sh-d{font-size:.82rem;color:var(--muted2)}
.starthere .sh-go{flex:none;color:#0b1220;background:var(--sky);border-radius:10px;padding:9px 16px;font-weight:800;font-size:.82rem}

.filterbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 2px}
.searchwrap{position:relative;flex:1;min-width:220px}
.searchwrap .si{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.6;font-size:.9rem;pointer-events:none}
.searchwrap input{width:100%;padding:11px 14px 11px 36px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-size:.9rem;font-family:inherit}
.searchwrap input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.dfilter{display:flex;gap:6px;flex-wrap:wrap}
.dchip{border:1px solid var(--line);background:var(--panel);color:var(--muted2);border-radius:20px;
  padding:8px 14px;font-size:.76rem;font-weight:800;cursor:pointer;transition:.14s;min-height:38px}
.dchip:hover{border-color:var(--muted2)}
.dchip.on{border-color:var(--dc,var(--sky));color:var(--dc,var(--sky));background:#0c1a30}
.dchip[data-band="0"].on{border-color:var(--sky);color:var(--sky)}
.noresult{margin:18px 0;color:var(--muted2);font-size:.9rem}
.linkbtn{background:none;border:none;color:var(--sky);cursor:pointer;font-weight:800;font-size:.9rem;text-decoration:underline}
.cat.hidden,.card.hidden{display:none !important}

/* first-visit welcome overlay */
.rf-welcome{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,8,16,.72);backdrop-filter:blur(5px)}
.rf-welcome .card2{max-width:440px;border:1px solid var(--sky);border-radius:18px;padding:26px;
  background:linear-gradient(180deg,#0d1830,#0b1220);box-shadow:0 0 60px rgba(56,189,248,.22)}
.rf-welcome h3{margin:0 0 6px;color:var(--sky);font-size:1.3rem}
.rf-welcome p{color:var(--muted2);font-size:.9rem;line-height:1.6;margin:8px 0}
.rf-welcome .steps{margin:14px 0}
.rf-welcome .stp{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:.86rem;color:var(--txt)}
.rf-welcome .stp .n{flex:none;width:24px;height:24px;border-radius:50%;background:#0c1a30;border:1px solid var(--sky);
  color:var(--sky);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem}
.rf-welcome .wbtns{display:flex;gap:10px;margin-top:18px}

/* =============================================================================
 * RESULT / COACHING / RUN-GRAPH  (rf-result.js) - shared across all labs
 * ========================================================================== */
.rf-graph{ display:block; width:100%; border:1px solid var(--line); border-radius:10px;
  background:#0a0f1c; margin:2px 0 4px; }
.rf-graphwrap{ margin:10px 0; }
.rf-graphwrap .cap{ font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:800;
  color:var(--muted); margin-bottom:5px; }

.rf-coach{ border-radius:11px; padding:11px 14px; margin:10px 0; border:1px solid var(--line); }
.rf-coach.lose{ background:rgba(56,189,248,.05); border-color:rgba(56,189,248,.28); }
.rf-coach.win{ background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.30); }
.rf-coach-h{ font-size:.74rem; font-weight:800; letter-spacing:.4px; margin-bottom:6px; }
.rf-coach.lose .rf-coach-h{ color:#7dd3fc; }
.rf-coach.win .rf-coach-h{ color:#86efac; }
.rf-coach-why{ font-size:.82rem; color:#fca5a5; margin-bottom:8px; font-weight:600; }
.rf-coach-tips{ margin:0; padding-left:18px; }
.rf-coach-tips li{ font-size:.82rem; color:var(--muted2); line-height:1.55; margin:5px 0; }
.rf-coach-tips li::marker{ color:var(--sky); }

/* inline star rating row (rf-result injectStarRow) */
.rf-star{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px;
  padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(56,189,248,.05); }
.rf-star-q{ font-size:.8rem;font-weight:700;color:var(--muted2); }
.rf-star-set{ display:flex;gap:2px; }
.rf-star-b{ background:none;border:none;cursor:pointer;font-size:1.35rem;line-height:1;color:#475569;
  padding:0 1px;transition:.08s;font-family:inherit; }
.rf-star-b:hover,.rf-star-b.on{ color:#fbbf24;transform:scale(1.12); }
.rf-star-thx{ font-size:.82rem;font-weight:800;color:#86efac; }

/* small stat pills a lab can reuse under a graph */
.rf-statrow{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.rf-stat{ background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 11px; }
.rf-stat .l{ font-size:.52rem; letter-spacing:1px; color:var(--muted); font-weight:700; text-transform:uppercase; }
.rf-stat .v{ font-size:1.05rem; font-weight:800; margin-top:2px; }
.rf-stat .v.ok{ color:var(--green); } .rf-stat .v.bad{ color:#fca5a5; }

/* =============================================================================
 * GLOBAL RESPONSIVE RULES
 * These apply to the shared header/lab patterns used across pages. They target
 * the existing class names (.bar, .layout, .top, .stage, .grid) so every page
 * gets consistent phone behaviour without per-file edits.
 * ========================================================================== */

/* Tablet / small laptop */
@media (max-width:900px){
  .wrap{ padding-left:18px; padding-right:18px; }
  /* lab two-column layout already collapses via its own 1040px rule; nothing needed */
}

/* Phone */
@media (max-width:560px){
  .wrap{ padding:20px 14px 64px; }

  /* --- lab header bar: let it wrap tidily, shrink the tab track --- */
  header.bar{ gap:8px; padding:9px 12px; }
  header.bar .tabsTrack{ order:5; width:100%; max-width:100%; overflow-x:auto; }
  header.bar .simspeed{ display:none; }        /* speed slider is desktop-nicety; hide on phone */

  /* --- build wizard header --- */
  header.top{ gap:10px; }

  /* --- build wizard drawing stage: was a hard 440px → make it fluid --- */
  .chstage{ width:100% !important; }
  .stage{ width:100% !important; max-width:100%; height:auto; aspect-ratio:4 / 3; }
  .shapegrid{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)) !important; }

  /* --- catalog grid → single column, comfy --- */
  .grid{ grid-template-columns:1fr !important; gap:14px !important; }

  /* --- buttons a touch bigger for thumbs --- */
  .rf-btn{ min-height:44px; }

  /* --- catalog: filter + start-here stack cleanly --- */
  .filterbar{ gap:10px; }
  .dfilter{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .starthere{ flex-wrap:wrap; }
  .starthere .sh-go{ width:100%; text-align:center; margin-top:6px; }
  .pathnav{ margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
  .rf-welcome .card2{ padding:20px; }
}