/* ─────────────────────────────────────────────────────────────────────────────
   Mevzuat Grafiği (Pages/MevzuatGrafigi, js/mevzuatGrafigi.js).
   Kaynak: kök dizindeki mevzuat-grafigi.html mockup'ı; ölçü/renk/font birebir.
   KURAL: bu dosyadaki HER seçici .mg-kok ile başlar. html/body/:root/* ya da
   çıplak element seçicisi yazılmaz; sınıf ve id'ler mg- önekli, değişkenler
   --mg- önekli ve .mg-kok üzerinde. Tek koyu görünüm bilinçli seçim.
   ───────────────────────────────────────────────────────────────────────────── */

/* Kök: mockup'taki :root + html/body + .app. rz-body transform'lu olduğu için
   absolute inset:0 onun dolgu kutusuna oturur; sihirli yükseklik hesabı yok. */
.mg-kok {
    color-scheme: dark;
    --mg-bg: #1c1d20; --mg-grid: #232529; --mg-grid2: #2a2d32;
    --mg-panel: #27292d; --mg-panel2: #303237; --mg-panel3: #383b41; --mg-line: #41454c;
    --mg-fg: #d8dade; --mg-mute: #8b9099; --mg-faint: #60646c; --mg-sel: #4ea6ff;
    --mg-c-firma: #6cb8ff; --mg-c-islem: #8fd46c; --mg-c-istisna: #efc44f; --mg-c-indirim: #ec88c7; --mg-c-kanun: #b6a2ff; --mg-c-yuk: #ff9b6d;
    --mg-danger: #ff6262; --mg-ok: #7fd97a;
    --mg-f-ui: 'IBM Plex Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
    --mg-f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    /* Radzen'in .rz-layout altındaki özel scrollbar'ı panellere de iner; koyu zemine uyduruluyor. */
    --rz-scrollbar-background-color: transparent;
    --rz-scrollbar-color: var(--mg-line);

    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mg-bg);
    color: var(--mg-fg);
    font-family: var(--mg-f-ui);
    font-size: 13px;
    font-weight: 400;
    /* Mockup'ta body varsayılanları: Radzen/Bootstrap'in body ayarları buraya miras gelmesin. */
    line-height: normal;
    text-align: left;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}
.mg-kok, .mg-kok *, .mg-kok *::before, .mg-kok *::after { box-sizing: border-box }
.mg-kok button, .mg-kok input, .mg-kok select, .mg-kok textarea { font: inherit; color: inherit }
.mg-kok button { cursor: pointer }
.mg-kok :focus-visible { outline: 2px solid var(--mg-sel); outline-offset: 1px }

/* Bootstrap reboot + Radzen element kurallarını mockup'ın tarayıcı varsayılanına geri al. */
.mg-kok h2, .mg-kok h3 { line-height: revert; color: revert }
.mg-kok p { margin: revert }
.mg-kok label { display: revert }
.mg-kok button, .mg-kok input, .mg-kok select, .mg-kok textarea { margin: revert }
.mg-kok input::placeholder, .mg-kok textarea::placeholder { color: revert }
.mg-kok ::selection { background-color: revert; color: revert }
.mg-kok [hidden] { display: none !important }

/* Yükleniyor / hata / tuval yok durumları (mockup'ta yok; sade metin). */
.mg-kok .mg-durum { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--mg-bg); color: var(--mg-mute); font-size: 13px }
.mg-kok .mg-bos-tuval { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--mg-mute); font-size: 13px; pointer-events: none; white-space: nowrap }

.mg-kok .mg-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--mg-panel); border-bottom: 1px solid #15161a; flex-wrap: wrap }
.mg-kok .mg-crumb { display: flex; align-items: baseline; gap: 6px; white-space: nowrap }
.mg-kok .mg-crumb b { font-weight: 600; letter-spacing: .02em }
.mg-kok .mg-crumb span { color: var(--mg-mute) }
.mg-kok .mg-tabs { display: flex; gap: 2px; flex-wrap: wrap }
.mg-kok .mg-tab { background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 3px 10px; color: var(--mg-mute) }
.mg-kok .mg-tab[aria-selected="true"] { background: var(--mg-panel3); border-color: var(--mg-line); color: var(--mg-fg) }
/* Yeni tuval / yeniden adlandırma: sekme yerinde açılan kutu (mockup'ta yok). */
.mg-kok .mg-tab-inp { background: var(--mg-bg); border: 1px solid var(--mg-sel); border-radius: 3px; padding: 3px 8px; width: 160px; color: var(--mg-fg) }
.mg-kok .mg-sp { flex: 1 }
.mg-kok .mg-tbtn { background: var(--mg-panel2); border: 1px solid var(--mg-line); border-radius: 3px; padding: 3px 9px; font-size: 12px; color: var(--mg-mute) }
.mg-kok .mg-tbtn[aria-pressed="true"] { color: var(--mg-fg); background: var(--mg-panel3) }
.mg-kok .mg-zoom { display: flex; align-items: center; gap: 2px }
.mg-kok .mg-zoom output { font-family: var(--mg-f-mono); font-size: 11px; color: var(--mg-mute); min-width: 42px; text-align: center; font-variant-numeric: tabular-nums }

.mg-kok .mg-stage { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab;
    background-color: var(--mg-bg);
    background-image:
        linear-gradient(var(--mg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mg-grid) 1px, transparent 1px),
        linear-gradient(var(--mg-grid2) 1px, transparent 1px), linear-gradient(90deg, var(--mg-grid2) 1px, transparent 1px); }
.mg-kok .mg-stage.mg-panning { cursor: grabbing }
.mg-kok .mg-world { position: absolute; left: 0; top: 0; transform-origin: 0 0 }
.mg-kok #mg-edges { position: absolute; left: -5000px; top: -5000px; width: 12000px; height: 12000px; pointer-events: none; overflow: visible }
.mg-kok #mg-edges .mg-e { fill: none; stroke-width: 2; opacity: .8 }
.mg-kok #mg-edges .mg-e.mg-sel { stroke-width: 3.2; opacity: 1 }
.mg-kok #mg-edges .mg-ehit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer }
.mg-kok #mg-edges .mg-x { fill: none; stroke: var(--mg-danger); stroke-width: 1.6; stroke-dasharray: 6 5; opacity: .75 }
.mg-kok #mg-edges .mg-dim { opacity: .1 }
.mg-kok #mg-edges text { font-family: var(--mg-f-ui); font-size: 11px; fill: var(--mg-fg); paint-order: stroke; stroke: var(--mg-bg); stroke-width: 4px; stroke-linejoin: round }
.mg-kok #mg-edges text.mg-xl { fill: var(--mg-danger) }
.mg-kok #mg-edges .mg-wire { fill: none; stroke-width: 2; stroke-dasharray: 5 4 }

.mg-kok .mg-node { position: absolute; width: 220px; background: var(--mg-panel); border: 1px solid #17181b; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: default; transition: opacity .15s }
.mg-kok .mg-node.mg-sel { border-color: var(--mg-sel); box-shadow: 0 0 0 1px var(--mg-sel), 0 6px 18px rgba(0,0,0,.45) }
.mg-kok .mg-node.mg-dim { opacity: .22 }
.mg-kok .mg-nh { height: 28px; display: flex; align-items: center; gap: 7px; padding: 0 9px; background: var(--mg-panel2); border-radius: 5px 5px 0 0; cursor: move; border-bottom: 1px solid #1a1b1e }
.mg-kok .mg-nh .mg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-c); flex: none }
.mg-kok .mg-nh .mg-nt { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mg-kok .mg-nh .mg-ty { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mg-faint) }
.mg-kok .mg-np { position: relative; height: 22px; display: flex; align-items: center; padding: 0 12px; font-size: 11px; color: var(--mg-mute); gap: 6px }
.mg-kok .mg-np .mg-pr { margin-left: auto }
.mg-kok .mg-port { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mg-pc); background: var(--mg-panel); cursor: crosshair }
.mg-kok .mg-port.mg-in { left: -6px }
.mg-kok .mg-port.mg-out { right: -6px }
.mg-kok .mg-port.mg-on { background: var(--mg-pc) }
.mg-kok .mg-port::after { content: ""; position: absolute; inset: -8px; border-radius: 50% }
.mg-kok .mg-port:hover { transform: scale(1.25) }
.mg-kok .mg-stage.mg-wiring .mg-port.mg-out.mg-ok { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mg-ok) 40%, transparent); border-color: var(--mg-ok) }
.mg-kok .mg-stage.mg-wiring .mg-port.mg-out.mg-no { border-color: var(--mg-danger); opacity: .5 }
.mg-kok .mg-stage.mg-wiring .mg-port.mg-in.mg-ok { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mg-ok) 40%, transparent); border-color: var(--mg-ok) }
.mg-kok .mg-stage.mg-wiring .mg-port.mg-in.mg-no { border-color: var(--mg-danger); opacity: .5 }
.mg-kok .mg-nb { margin: 0 8px 8px; padding: 9px 10px; border-radius: 3px; background: color-mix(in srgb, var(--mg-c) 13%, var(--mg-panel2)); border: 1px solid color-mix(in srgb, var(--mg-c) 30%, transparent) }
.mg-kok .mg-madde { font-family: var(--mg-f-mono); font-size: 15px; font-weight: 500; color: var(--mg-c); line-height: 1.2 }
.mg-kok .mg-oz { margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--mg-fg); opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }

.mg-kok .mg-t-firma { --mg-c: var(--mg-c-firma) } .mg-kok .mg-t-islem { --mg-c: var(--mg-c-islem) } .mg-kok .mg-t-istisna { --mg-c: var(--mg-c-istisna) }
.mg-kok .mg-t-indirim { --mg-c: var(--mg-c-indirim) } .mg-kok .mg-t-kanun { --mg-c: var(--mg-c-kanun) } .mg-kok .mg-t-yuk { --mg-c: var(--mg-c-yuk) }

.mg-kok .mg-panel { position: absolute; background: var(--mg-panel); border: 1px solid #17181b; border-radius: 5px; box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; flex-direction: column; cursor: default; min-width: 0 }
.mg-kok .mg-ph { padding: 8px 10px; border-bottom: 1px solid var(--mg-line); display: flex; align-items: baseline; gap: 8px }
.mg-kok .mg-ph h2 { margin: 0; font-size: 13px; font-weight: 600 }
.mg-kok .mg-ph small { color: var(--mg-mute); font-size: 11px }
.mg-kok .mg-pb { padding: 8px 10px; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 10px }
.mg-kok .mg-bb { left: 12px; top: 12px; width: 250px; bottom: 12px }
.mg-kok .mg-insp { right: 12px; top: 12px; width: 300px; max-height: calc(58% - 18px) }
.mg-kok .mg-prev { right: 12px; bottom: 12px; width: 300px; max-height: calc(42% - 18px) }

.mg-kok .mg-field { display: flex; flex-direction: column; gap: 3px }
.mg-kok .mg-field label, .mg-kok .mg-lbl { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mg-mute) }
.mg-kok .mg-inp { background: var(--mg-bg); border: 1px solid var(--mg-line); border-radius: 3px; padding: 5px 7px; width: 100% }
.mg-kok textarea.mg-inp { resize: vertical; min-height: 70px; line-height: 1.4 }
.mg-kok .mg-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--mg-c) 18%, transparent); color: var(--mg-c); align-self: flex-start }
.mg-kok .mg-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mg-c) }

.mg-kok .mg-group { display: flex; flex-direction: column; gap: 2px }
.mg-kok .mg-gh { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mg-mute); padding: 2px 0 }
.mg-kok .mg-gh i { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-c) }
.mg-kok .mg-li { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--mg-panel2); border: 1px solid transparent; border-radius: 11px; padding: 3px 9px }
.mg-kok .mg-li:hover { border-color: var(--mg-line) }
.mg-kok .mg-li .mg-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mg-kok .mg-li .mg-m { font-family: var(--mg-f-mono); font-size: 10px; color: var(--mg-faint); white-space: nowrap }
.mg-kok .mg-li .mg-st { font-size: 10px; color: var(--mg-c); width: 12px; text-align: center }
.mg-kok .mg-li.mg-out .mg-t { color: var(--mg-mute) }
.mg-kok .mg-newcard { display: grid; grid-template-columns: 1fr auto; gap: 5px }
.mg-kok .mg-newcard select { grid-column: 1/-1 }
.mg-kok .mg-btn { background: var(--mg-panel3); border: 1px solid var(--mg-line); border-radius: 3px; padding: 4px 10px }
.mg-kok .mg-btn.mg-danger { color: var(--mg-danger) }
.mg-kok .mg-rules { font-size: 11px; color: var(--mg-mute); line-height: 1.5; border-top: 1px solid var(--mg-line); padding-top: 8px }
.mg-kok .mg-rules .mg-flow { font-family: var(--mg-f-mono); font-size: 10.5px; color: var(--mg-fg) }
.mg-kok .mg-note { font-size: 11px; color: var(--mg-faint); line-height: 1.45 }

.mg-kok .mg-conn { display: flex; flex-direction: column; gap: 3px }
.mg-kok .mg-cn { display: flex; align-items: center; gap: 6px; background: var(--mg-panel2); border-radius: 3px; padding: 4px 7px; border: 1px solid transparent; text-align: left; width: 100% }
.mg-kok .mg-cn:hover { border-color: var(--mg-line) }
.mg-kok .mg-cn .mg-r { font-size: 10.5px; color: var(--mg-mute); width: 62px; flex: none }
.mg-kok .mg-cn .mg-d { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-c); flex: none }
.mg-kok .mg-cn .mg-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mg-kok .mg-cn.mg-x .mg-r { color: var(--mg-danger) }
.mg-kok .mg-views { display: flex; gap: 4px; flex-wrap: wrap }
.mg-kok .mg-vt { font-size: 11px; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--mg-line); color: var(--mg-mute) }
.mg-kok .mg-vt.mg-cur { color: var(--mg-fg); border-color: var(--mg-sel) }
.mg-kok .mg-row { display: flex; gap: 6px; flex-wrap: wrap }

.mg-kok .mg-sum h3 { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mg-mute); font-weight: 500 }
.mg-kok .mg-sum ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px }
.mg-kok .mg-sum li { display: flex; gap: 7px; align-items: baseline; font-size: 12px }
.mg-kok .mg-sum li .mg-d { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-c); flex: none; transform: translateY(-1px) }
.mg-kok .mg-sum li .mg-m { margin-left: auto; font-family: var(--mg-f-mono); font-size: 10px; color: var(--mg-faint); white-space: nowrap }
.mg-kok .mg-sum.mg-uygun li { opacity: .5 }
.mg-kok .mg-chk { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.35; cursor: pointer }
.mg-kok .mg-chk input { margin-top: 2px; accent-color: var(--mg-c-yuk) }
.mg-kok .mg-chk.mg-done span { color: var(--mg-faint); text-decoration: line-through }
.mg-kok .mg-warn { border: 1px solid color-mix(in srgb, var(--mg-danger) 55%, transparent); background: color-mix(in srgb, var(--mg-danger) 10%, transparent); border-radius: 4px; padding: 7px 9px; font-size: 12px; line-height: 1.4 }
.mg-kok .mg-warn b { color: var(--mg-danger); font-weight: 600 }
.mg-kok .mg-sil-onay { display: flex; flex-direction: column; gap: 6px }
.mg-kok .mg-sil-onay .mg-sil-say { font-size: 11px; color: var(--mg-mute) }
.mg-kok .mg-sil-onay .mg-sil-say b { color: var(--mg-fg); font-weight: 600 }
.mg-kok .mg-btn:disabled, .mg-kok .mg-inp:disabled { opacity: .55; cursor: default }
.mg-kok .mg-empty { color: var(--mg-mute); font-size: 12px; line-height: 1.5 }

.mg-kok .mg-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 11px; color: var(--mg-faint); background: color-mix(in srgb, var(--mg-panel) 80%, transparent); padding: 3px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none }
.mg-kok .mg-toast { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); background: var(--mg-panel3); border: 1px solid var(--mg-line); border-left: 3px solid var(--mg-danger); border-radius: 4px; padding: 8px 12px; font-size: 12px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.4) }
.mg-kok .mg-toast.mg-good { border-left-color: var(--mg-ok) }

@media (max-width:1100px) { .mg-kok .mg-hint { display: none } }
@media (max-width:820px) {
    .mg-kok .mg-bb { width: auto; right: 12px; bottom: auto; max-height: calc(100% - 24px) }
    .mg-kok .mg-insp, .mg-kok .mg-prev { width: auto; left: 12px }
    .mg-kok .mg-insp { max-height: calc(60% - 18px) }
    .mg-kok .mg-crumb span { display: none }
}
@media (prefers-reduced-motion:reduce) { .mg-kok .mg-node { transition: none } }