/* AIRadar Cihaz Laboratuvarı — design v3 (user request 2026-09-30: menu and pages "estetik vb. özelliklerde" like the
   Akademi panels). A visual layer over style.css / vent.css: top bar, home hero, device cards with a colour and an icon
   per device (data-dev), scenario cards, device menus (.vhome) with an icon badge per screen, panels and buttons.
   Simulator screens (waveforms, numerics, alarm colours and rates) are left exactly as they are. CSP: no inline styles;
   icons are CSS masks with data: SVGs (img-src 'self' data:). */
:root { --v3-ink: #0b1324; --v3-muted: #64748b; --v3-line: #e4e9f1; --v3-acc: #2563eb; --v3-acc-d: #1e40af; --v3-acc-l: #eef3ff;
  --v3-grad: linear-gradient(125deg, #0f766e 0%, #0e7490 40%, #1d4ed8 80%, #4338ca 100%);
  --v3-sh: 0 1px 2px rgba(11, 19, 36, .05), 0 6px 20px rgba(11, 19, 36, .06); --v3-sh-h: 0 2px 6px rgba(11, 19, 36, .07), 0 14px 34px rgba(11, 19, 36, .12); }
html { scroll-padding-top: 72px; }   /* the sticky top bar never covers a deep-link target */
body { background: #f5f7fb; font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif; }

/* ---------- top bar */
.top { background: linear-gradient(90deg, #0b1220, #0f1d3a); padding: 10px 20px; box-shadow: 0 2px 12px rgba(2, 6, 23, .25); position: sticky; top: 0; z-index: 20; }
.brand { font-size: 16px; letter-spacing: -.2px; } .brand img { width: 30px; height: 30px; padding: 4px; border-radius: 9px; background: rgba(51, 224, 122, .12); }
.top-r label { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 12.5px; font-weight: 600; }
.top-r select { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 6px 10px; }
.top-r select option { color: #0b1324; }
.who { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.disclaimer { font-size: 12.5px; padding: 7px 20px; } .langnote { padding: 5px 20px; }

/* ---------- home hero */
.home, .vhome { max-width: 1120px; padding: 24px 20px 40px; }
.cz-hero { position: relative; overflow: hidden; padding: 30px 32px; border-radius: 26px; color: #fff; background: var(--v3-grad); box-shadow: 0 18px 40px rgba(14, 116, 144, .25); margin-bottom: 8px; }
.cz-hero::after { content: ""; position: absolute; inset: auto -2% -6px -2%; height: 90px; opacity: .22; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60h120l14-30 14 55 16-70 12 45h120l14-30 14 55 16-70 12 45h248' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 60h120l14-30 14 55 16-70 12 45h120l14-30 14 55 16-70 12 45h248' fill='none' stroke='black' stroke-width='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.cz-hero h1 { margin: 0; font-size: 34px; letter-spacing: -.7px; line-height: 1.15; color: #fff; }
.cz-hero .lead { color: rgba(255, 255, 255, .9); font-size: 16.5px; line-height: 1.6; max-width: 70ch; margin: 10px 0 0; position: relative; z-index: 1; }

/* ---------- section heads */
.home h2, .vhome h2, #devCatalog h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; letter-spacing: -.3px; margin: 30px 0 4px; color: var(--v3-ink); }
.home h2::before, .vhome h2::before, #devCatalog h2::before { content: ""; width: 5px; height: 22px; border-radius: 4px; background: var(--v3-grad); flex: none; }

/* ---------- cards */
.cards { gap: 14px; }
.card { position: relative; overflow: hidden; border-radius: 18px; padding: 16px 18px; border: 1px solid var(--v3-line); box-shadow: var(--v3-sh); transition: box-shadow .18s, transform .18s, border-color .18s; gap: 6px; }
.card:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--v3-sh-h); border-color: #c7d6ee; }
.card b { font-size: 15.5px; line-height: 1.35; letter-spacing: -.1px; color: var(--v3-ink); }
.card:disabled { opacity: 1; background: #f8fafc; box-shadow: none; } .card:disabled b { color: #94a3b8; }
.card:disabled::after { content: ""; position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; background: #94a3b8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0110 0v3h1v10H6V11zm2 0h6V8a3 3 0 00-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0110 0v3h1v10H6V11zm2 0h6V8a3 3 0 00-6 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.badge { font-weight: 800; padding: 2px 9px; } .badge.approved { background: #e7f8ee; color: #15803d; }

/* device cards: a colour and an icon per device */
.cards.dev { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.devcard { padding-top: 64px; min-height: 176px; }
.devcard::before { content: ""; position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 12px; background: var(--hl, var(--v3-acc-l)); }
.devcard b::before { content: ""; position: absolute; left: 27px; top: 25px; width: 22px; height: 22px; background: var(--hc, var(--v3-acc));
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.devcard::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--hc, var(--v3-acc)); }
.devcard.soon { border-style: dashed; } .devcard.soon::after { opacity: .3; }
.devcard > span:last-child { color: var(--v3-muted); font-size: 13px; line-height: 1.5; }
[data-dev=monitor] { --hc: #dc2626; --hl: #fdecec; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-5 3 10 2-6 2 1h5' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-dev=ventilator] { --hc: #0891b2; --hl: #e6f6fa; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3v7c0 1-1 2-2 2H8c-3 0-5 3-5 6v2c0 1 1 1 2 1 3 0 6-2 6-6zm2 0v7c0 1 1 2 2 2h1c3 0 5 3 5 6v2c0 1-1 1-2 1-3 0-6-2-6-6z'/%3E%3C/svg%3E"); }
[data-dev=abg] { --hc: #be123c; --hl: #fdeef3; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s7 7.6 7 13a7 7 0 01-14 0c0-5.4 7-13 7-13z'/%3E%3C/svg%3E"); }
[data-dev=icu] { --hc: #7c3aed; --hl: #f3effe; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h2v7h8V9h6a4 4 0 014 4v6h-2v-3H4v3H2zm5 1a2.5 2.5 0 110 5 2.5 2.5 0 010-5z'/%3E%3C/svg%3E"); }
[data-dev=infusion] { --hc: #0d9488; --hl: #e7f7f5; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8v2h-1v3h2v11a3 3 0 01-3 3h-4a3 3 0 01-3-3V7h2V4H8zm3 2v3h2V4zm-2 6v2h6v-2z'/%3E%3C/svg%3E"); }
[data-dev=care] { --hc: #16a34a; --hl: #e7f8ee; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5zm-1 13l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11z'/%3E%3C/svg%3E"); }
[data-dev=ecg12] { --hc: #e11d48; --hl: #fdeef2; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13h3l1.5-3 2 7 3-13 2.5 12 1.5-3h6.5' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-dev=eeg] { --hc: #9333ea; --hl: #f5eefe; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0 1.5-1.5 2 0' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-dev=pocus] { --hc: #0369a1; --hl: #e7f3fb; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v5l-1 2h-4L9 7zm-5 10a8 8 0 0116 0l-8 10z'/%3E%3C/svg%3E"); }
[data-dev=neuronav] { --hc: #4338ca; --hl: #eef0fe; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v4.1A6 6 0 0117.9 11H22v2h-4.1A6 6 0 0113 17.9V22h-2v-4.1A6 6 0 016.1 13H2v-2h4.1A6 6 0 0111 6.1zm1 6a4 4 0 100 8 4 4 0 000-8zm0 3a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); }
[data-dev=ct] { --hc: #1d4ed8; --hl: #eef3ff; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 5a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E"); }
[data-dev=mri] { --hc: #0f766e; --hl: #e7f7f5; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h5v9a3 3 0 006 0V3h5v9a8 8 0 01-16 0zm2 2v2h1V5zm11 0v2h1V5z'/%3E%3C/svg%3E"); }
[data-dev=us] { --hc: #0284c7; --hl: #e6f4fb; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8a10 10 0 0114 0M7.5 11a6.5 6.5 0 019 0M10 14a3 3 0 014 0' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3C/svg%3E"); }
[data-dev=petct] { --hc: #c2410c; --hl: #fff1e8; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='black' stroke-width='1.8' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='black' stroke-width='1.8' transform='rotate(120 12 12)'/%3E%3C/svg%3E"); }

/* free practice card on the home page */
#practiceBtn { background: linear-gradient(135deg, #f0fdf4, #fff 70%); border-color: #bbf7d0; }
#practiceBtn b { color: #15803d; }

/* ---------- device menus (.vhome screens): the title gets the device's icon badge */
.vhome h1 { display: flex; align-items: center; gap: 14px; font-size: 30px; letter-spacing: -.5px; margin: 0 0 8px; color: var(--v3-ink); }
.vhome h1::before { content: ""; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--hc, var(--v3-acc)) var(--ic-b, none) center / 26px no-repeat; box-shadow: 0 8px 18px rgba(11, 19, 36, .18); }
.vhome > .lead, .vhome > p.lead { font-size: 15.5px; color: var(--v3-muted); max-width: 75ch; }
.vhome > .row.between { align-items: flex-start; }
#vHome { --hc: #0891b2; } #vAbgScr { --hc: #be123c; } #pHome { --hc: #0d9488; } #cScr { --hc: #16a34a; } #e12Scr { --hc: #e11d48; } #eegScr { --hc: #9333ea; }
#pcsScr { --hc: #0369a1; } #navScr { --hc: #4338ca; } #ctScr { --hc: #1d4ed8; } #mrScr { --hc: #0f766e; } #usScr { --hc: #0284c7; } #petScr { --hc: #c2410c; }
.vhome h1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4l2-5 3 10 2-6 2 1h5' fill='none' stroke='white' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 26px; }

/* ---------- panels, buttons, tables */
.panel { border-radius: 16px; border-color: var(--v3-line); box-shadow: var(--v3-sh); }
.home .panel { padding: 16px 18px; } .home .panel > b:first-child { display: block; font-size: 15px; margin-bottom: 6px; }
button { border-radius: 10px; transition: box-shadow .15s, border-color .15s, background .15s; }
button:not(.card):not(.shock):not(.warn):not(.tog):hover:enabled { border-color: #bfd3fe; box-shadow: 0 3px 10px rgba(11, 19, 36, .08); }
.modes button { border-radius: 10px; } .modes button.on { background: var(--v3-acc); border-color: var(--v3-acc); }
input, select { border-radius: 9px; } input:focus, select:focus { outline: none; border-color: var(--v3-acc); box-shadow: 0 0 0 3px #bfd3fe; }
.tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--v3-muted); background: #f7f9fc; }
.modal .box { border-radius: 20px; box-shadow: 0 30px 80px rgba(2, 6, 23, .35); }
details > summary { cursor: pointer; font-weight: 700; color: var(--v3-acc-d); }

@media (max-width: 720px) {
  .top { position: static; } .cz-hero { padding: 22px; border-radius: 20px; } .cz-hero h1 { font-size: 26px; }
  .vhome h1 { font-size: 24px; } .vhome h1::before { width: 40px; height: 40px; }
  .cards.dev { grid-template-columns: repeat(2, minmax(0, 1fr)); } .devcard { padding: 58px 14px 14px; min-height: 0; } .devcard > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }