/* muratok.dev/lab — Ev laboratuvari
   Layout: ayni SAP GUI cercevesi; ici gece calisan bir sunucu odasi. Hero'da baslik ve sayaclar,
   altinda tam genislikte canli topoloji (hatlarda akan sinyaller), sonra kabin (LED'li uniteler),
   terminal gunlugu, 24 saatlik gece nobeti kadrani, SAP kartlari, kurallar.
   Bilerek tek tema: kontrol odasi karanlikta okunur. Hat renkleri: A kehribar, B mavi, C yesil,
   gece yedegi mor; durum yesili ayri. */

:root.l, :root.l[data-theme] {
  --paper:   #060A10;
  --sheet:   #0C131D;
  --ink:     #E6EDF5;
  --ink-2:   #8D9DB1;
  --rule:    #1A2533;
  --kw:      #7CB4FF;
  --amber:   #F2B24C;
  --amber-bg:#2E220C;
  --add:     #4FD69C;
  --add-bg:  #0E271C;
  --del:     #FF7A6B;
  --del-bg:  #331511;
  --code-bg: #08101A;
  --shadow:  0 1px 0 rgba(255,255,255,.03), 0 24px 60px -30px rgba(0,0,0,.9);
  --ra: #F2B24C; --rb: #6EA8FF; --rc: #4FD69C; --ry: #B392FF; --rm: #7E8FA6; --rs: #6B7C92; --ro: #C9D6E6;
  --cam: rgba(124,180,255,.07);
  color-scheme: dark;
}
.l body {
  background:
    radial-gradient(1100px 520px at 78% -120px, rgba(110,168,255,.14), transparent 70%),
    radial-gradient(900px 500px at -10% 30%, rgba(179,146,255,.07), transparent 70%),
    linear-gradient(var(--cam) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--cam) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--paper);
}

/* ---------- Hero ---------- */
.l-hero { padding-block: clamp(36px, 6vw, 72px) clamp(20px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.l-hero-txt { display: grid; gap: 16px; }
.l-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .98; letter-spacing: -.035em; font-weight: 780; }
.l-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--ra), var(--rb) 55%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-lead { font-size: var(--s-lg); color: var(--ink-2); line-height: 1.45; max-width: 38rem; }
.l-sayac { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.l-sayac li { background: color-mix(in srgb, var(--sheet) 90%, transparent); padding: 16px 18px; display: grid; gap: 2px; }
.l-sayac b { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; }
.l-sayac li:nth-child(1) b { color: var(--ro); } .l-sayac li:nth-child(2) b { color: var(--rb); } .l-sayac li:nth-child(3) b { color: var(--ra); } .l-sayac li:nth-child(4) b { color: var(--ry); }
.l-sayac span { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); letter-spacing: .03em; }
@media (max-width: 860px) { .l-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Canli topoloji ---------- */
.l-harita { margin-bottom: clamp(30px, 5vw, 60px); background: linear-gradient(180deg, rgba(12,19,29,.92), rgba(8,14,22,.92)); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px rgba(0,0,0,.4) inset; overflow: hidden; }
.lh-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.lh-canli { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.lh-canli b { color: var(--ink); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.lh-canli i { width: 8px; height: 8px; border-radius: 50%; background: var(--add); box-shadow: 0 0 10px var(--add); animation: l-yanip 1.6s ease-in-out infinite; }
.lh-not { color: var(--ink-2); }
.lh-sec { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-sec button { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--f-mono); color: var(--ink-2); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.lh-sec button:hover { color: var(--ink); border-color: var(--ink-2); }
.lh-sec button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-2); background: rgba(255,255,255,.05); }
.lh-sec i { width: 10px; height: 3px; border-radius: 2px; }
.r-a { background: var(--ra); } .r-b { background: var(--rb); } .r-c { background: var(--rc); } .r-y { background: var(--ry); }
.lh-kap { overflow-x: auto; padding: 8px 10px 0; }
.topo { display: block; width: 100%; min-width: 860px; height: auto; }
.lh-alt { padding: 12px 16px 14px; border-top: 1px solid var(--rule); font-size: var(--s-sm); color: var(--ink-2); }

.ky { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ky-o { stroke: var(--ro); opacity: .55; } .ky-a { stroke: var(--ra); } .ky-b { stroke: var(--rb); } .ky-c { stroke: var(--rc); }
.ky-y { stroke: var(--ry); stroke-dasharray: 2 7; stroke-width: 3.2; }
.ky-m { stroke: var(--rm); stroke-dasharray: 4 6; stroke-width: 1.6; opacity: .7; }
.ky-s { stroke: var(--rs); stroke-dasharray: 5 6; stroke-width: 1.8; }
.nd-kut { fill: #0A121C; stroke: #233246; stroke-width: 1.2; }
.nd-cub { fill: var(--ro); }
.nd-a .nd-cub { fill: var(--ra); } .nd-b .nd-cub { fill: var(--rb); } .nd-c .nd-cub { fill: var(--rc); } .nd-y .nd-cub { fill: var(--ry); } .nd-m .nd-cub { fill: var(--rm); } .nd-s .nd-cub { fill: var(--rs); }
.nd-a .nd-kut { stroke: color-mix(in srgb, var(--ra) 45%, #233246); } .nd-b .nd-kut { stroke: color-mix(in srgb, var(--rb) 45%, #233246); }
.nd-c .nd-kut { stroke: color-mix(in srgb, var(--rc) 45%, #233246); } .nd-y .nd-kut { stroke: color-mix(in srgb, var(--ry) 40%, #233246); }
.nd-led { fill: var(--add); filter: drop-shadow(0 0 4px var(--add)); animation: l-yanip 2.4s ease-in-out infinite; }
.nd-s .nd-led { fill: var(--rs); filter: none; animation: none; }
.nd-ad { font: 700 15px var(--f-display); fill: var(--ink); }
.nd-alt { font: 500 11.5px var(--f-mono); fill: var(--ink-2); }
.pk { filter: drop-shadow(0 0 6px currentColor); }
.pk-o { fill: #fff; color: #fff; } .pk-a { fill: var(--ra); color: var(--ra); } .pk-b { fill: var(--rb); color: var(--rb); }
.pk-c { fill: var(--rc); color: var(--rc); } .pk-y { fill: var(--ry); color: var(--ry); } .pk-s { fill: var(--rs); color: var(--rs); }
.test-hal circle { fill: none; stroke: var(--amber); stroke-width: 2; }
.tst { font: 500 11px var(--f-mono); fill: var(--amber); letter-spacing: .14em; text-transform: uppercase; }
.bolge { font: 500 11px var(--f-mono); fill: var(--ry); letter-spacing: .2em; opacity: .7; }
.topo [data-yol] { transition: opacity .25s ease; }
.topo[data-odak="a"] [data-yol]:not([data-yol~="a"]),
.topo[data-odak="b"] [data-yol]:not([data-yol~="b"]),
.topo[data-odak="c"] [data-yol]:not([data-yol~="c"]),
.topo[data-odak="y"] [data-yol]:not([data-yol~="y"]) { opacity: .12; }

/* ---------- Kabin ---------- */
.l-sec { border-top-color: var(--rule); }
.kabin { max-width: 860px; background: linear-gradient(180deg, #121B27, #0B121B); border: 1px solid #22303F; border-radius: 14px; padding: 12px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); display: grid; gap: 6px; }
.kb-plaka { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; background: linear-gradient(180deg, #1A2533, #131C28); border: 1px solid #263445; font: 500 12.5px var(--f-mono); color: var(--ink-2); letter-spacing: .04em; }
.kb-vida { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5a6c, #1a2330); }
.kb-uniteler { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ru { display: grid; grid-template-columns: 14px 10px 42px minmax(0, 1fr) auto 120px 14px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px;
  background: linear-gradient(180deg, #172230, #101823); border: 1px solid #22303F; min-width: 0; }
.ru-kulak { width: 8px; height: 26px; border-radius: 3px; background: linear-gradient(90deg, #26364a, #1a2533); box-shadow: inset 0 0 0 1px #2c3d52; justify-self: center; }
.ru-led { width: 9px; height: 9px; border-radius: 50%; background: var(--add); box-shadow: 0 0 9px var(--add); animation: l-yanip var(--g, 1.4s) ease-in-out infinite; }
.ru-tur { font: 500 11px var(--f-mono); color: var(--rb); letter-spacing: .06em; }
.ru-ad { display: grid; gap: 1px; min-width: 0; }
.ru-ad b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.ru-ad small { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ru-et { font: 500 11px var(--f-mono); color: var(--ink-2); padding: 3px 8px; border: 1px solid #2a3a4e; border-radius: 999px; white-space: nowrap; }
.ru-izgara { height: 22px; border-radius: 3px; background: repeating-linear-gradient(90deg, #0a1018 0 3px, #1c2836 3px 6px); opacity: .9; }
.kb-ups { color: var(--rc); }
.kb-pil { width: 46px; height: 16px; border: 1.5px solid var(--rc); border-radius: 3px; padding: 2px; position: relative; }
.kb-pil::after { content: ""; position: absolute; right: -5px; top: 4px; width: 3px; height: 6px; background: var(--rc); border-radius: 0 2px 2px 0; }
.kb-pil i { display: block; height: 100%; width: 100%; background: var(--rc); border-radius: 1px; box-shadow: 0 0 8px var(--rc); }
@media (max-width: 680px) {
  .ru { grid-template-columns: 10px 34px minmax(0, 1fr); row-gap: 4px; }
  .ru .ru-kulak, .ru .ru-izgara { display: none; }
  .ru-et { grid-column: 3; justify-self: start; }
}

/* ---------- Terminal ---------- */
.terminal { margin: 0; max-width: 860px; background: #04080D; border: 1px solid #1E2B3A; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.tm-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #0B121B; border-bottom: 1px solid #1E2B3A; font: 500 12px var(--f-mono); color: var(--ink-2); }
.tm-noktalar { display: inline-flex; gap: 6px; }
.tm-noktalar i { width: 10px; height: 10px; border-radius: 50%; background: #2A3747; }
.tm-noktalar i:nth-child(1) { background: #FF6B5E; } .tm-noktalar i:nth-child(2) { background: #F2B24C; } .tm-noktalar i:nth-child(3) { background: #4FD69C; }
.tm-satirlar { list-style: none; margin: 0; padding: 14px 0; counter-reset: s; overflow-x: auto; }
.tm-satirlar li { position: relative; padding: 3px 18px 3px 52px; white-space: pre; animation: l-satir 10s linear infinite; animation-delay: calc(var(--i) * 1s - 1s); }
.tm-satirlar li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; width: 22px; text-align: right; font: 400 12px var(--f-mono); color: #3A4A5E; top: 5px; }
.tm-satirlar code { font: 400 13.5px/1.6 var(--f-mono); color: #B8C6D6; }
.ts-komut code { color: var(--ink); } .ts-ok code { color: var(--rb); } .ts-iyi code { color: var(--rc); } .ts-son code { color: var(--add); font-weight: 500; }
@keyframes l-satir { 0%, 9.9% { background: rgba(124,180,255,.10); box-shadow: inset 3px 0 0 var(--kw); } 10%, 100% { background: transparent; box-shadow: none; } }

/* ---------- Gece nobeti ---------- */
.gece { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.kadran { display: block; width: 100%; height: auto; max-width: 420px; }
.kd-zemin { fill: #0A111A; stroke: #1E2B3A; }
.kd-gece { fill: none; stroke: var(--ry); stroke-width: 26; opacity: .22; }
.kd-ray { fill: none; stroke: #263548; stroke-width: 2; }
.kd-cent { stroke: #3B4D63; stroke-width: 1.5; }
.kd-saat { font: 500 12px var(--f-mono); fill: var(--ink-2); }
.kd-saglik { fill: var(--rm); }
.kd-is circle { stroke: #0A111A; stroke-width: 3; }
.kd-is text { font: 700 11px var(--f-mono); fill: #06101D; }
.kd-y circle { fill: var(--ry); } .kd-b circle { fill: var(--rb); } .kd-c circle { fill: var(--rc); }
.kd-ibre line { stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--amber)); }
.kd-ibre circle { fill: var(--amber); }
.kd-orta { font: 700 26px var(--f-display); fill: var(--ink); font-variant-numeric: tabular-nums; }
.kd-orta-k { font: 500 11px var(--f-mono); fill: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; }
.gece-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gece-liste li { display: grid; grid-template-columns: 26px 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule); font-size: var(--s-sm); }
.gece-liste li:first-child { border-top: 0; }
.gece-liste time { font: 500 13px var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.kd-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11px var(--f-mono); color: #06101D; }
li.kd-y .kd-no { background: var(--ry); } li.kd-b .kd-no { background: var(--rb); } li.kd-c .kd-no { background: var(--rc); }
.kd-nok { background: transparent !important; } .kd-nok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rm); }
@media (max-width: 820px) { .gece { grid-template-columns: minmax(0, 1fr); } .kadran { margin-inline: auto; } }

/* ---------- SAP kartlari ---------- */
.sap-kart { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sk { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: var(--radius); background: linear-gradient(180deg, #0F1824, #0B121B); border: 1px solid var(--rule); min-width: 0; transition: border-color .2s ease, transform .2s ease; }
.sk:hover { border-color: color-mix(in srgb, var(--amber) 50%, var(--rule)); transform: translateY(-2px); }
.sk-tc { font: 500 1.6rem var(--f-mono); color: var(--amber); letter-spacing: .02em; line-height: 1; }
.sk-ad { font: 500 12px var(--f-mono); color: var(--ink-2); letter-spacing: .06em; text-transform: uppercase; }
.sk-ok { width: 28px; height: 1px; background: var(--rule); margin: 6px 0 2px; position: relative; }
.sk-ok::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid var(--ink-2); }
.sk p { font-size: var(--s-sm); color: var(--ink); line-height: 1.5; }
@media (max-width: 1000px) { .sap-kart { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sap-kart { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kurallar ---------- */
.kural { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kural li { padding: 18px; border-radius: var(--radius); background: rgba(12,19,29,.8); border: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.kr-tik { width: 22px; height: 22px; border-radius: 6px; background: var(--add-bg); position: relative; }
.kr-tik::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--add); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kural h3 { font-size: 1.1rem; font-weight: 650; }
.kural p { font-size: var(--s-sm); color: var(--ink-2); }

/* ---------- AI ---------- */
.l-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.l-ai > div { padding: 22px; border-radius: var(--radius); background: rgba(12,19,29,.8); border: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.l-ai h3 { font-size: var(--s-lg); font-weight: 650; }
.l-ai p { color: var(--ink-2); font-size: var(--s-sm); }
.l-ai a { color: var(--amber); }
@media (max-width: 760px) { .l-ai { grid-template-columns: minmax(0, 1fr); } }

@keyframes l-yanip { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .pkler, .test-hal { display: none; }
  .nd-led, .ru-led, .lh-canli i, .tm-satirlar li { animation: none; }
}